Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')

After installing into Vue3 application, I tested this directive on a very simple page pointing at

element. Seemed to work without any issues, could see the preview and in the console several logged comments which are in a language I can't read (maybe sand script).

After this first test, I proceeded to test my actual page which loaded into the "printMe" element range several components each of which has one of more input fields on them. Then pressed the same print button with v-print directive. Nothing occurred but in the console I see the following error message...

vue3-print-nb.es.js?1c95:1 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute') at e.getFormData (vue3-print-nb.es.js?1c95:1) at e.getBody (vue3-print-nb.es.js?1c95:1) at e.write (vue3-print-nb.es.js?1c95:1) at e.init (vue3-print-nb.es.js?1c95:1) at new e (vue3-print-nb.es.js?1c95:1) at d (vue3-print-nb.es.js?1c95:1) at HTMLButtonElement.a (vue3-print-nb.es.js?1c95:1)

Wondering if anyone has any idea what might cause the directive to crash? Do the components with the input fields need to include a

element, I see e.getFormData is listed at the top of the execution stack?

Guess I will add a form element to my page and report back if it fixes the problem.

Update: Adding the <form element made no difference.

Only difference between working test and failed attempt that I now see is the fact that I load JSON data that generates component behavior after print page is already loaded. In other words, print page loads and sample works okay. Then I click on button to load JSON data that is within v-for loop and inside the loop depending on data, different components are added to printMe region. Once updated, I press the print button and error fires. Perhaps it is something about loading template components but I must say, if I use Chrome native print function both preview and printing work correctly.

I have traced down the problem... the above error is generated by having a <select> element on the page that has <option> which is not selected.

Here is example that causes the error:

    modelValue.itemData.vncSubarea is equal to "" (empty string) when the page is loaded.
    let oSubareas = [{"name":"North"},{"name":"West"},{"name":"South"},{"name":"Other"}]

    1. This causes error if select element is not set by user before printing.

                <select v-model="modelValue.itemData.vncSubarea">
                    <option v-for="(subarea, index) in oSubareas" :key="index">{{subarea.name}}</option>
                </select>

    2. The works whether user selects option or not.

                <select v-model="modelValue.itemData.vncSubarea">
                    <option disabled value="">select Venice Subarea</option>
                    <option v-for="(subarea, index) in oSubareas" :key="index">{{subarea.name}}</option>
                </select>

    3. Also this works whether user selects option or not

                <select v-model="modelValue.itemData.vncSubarea">
                    <option selected value="">select Venice Subarea</option>
                    <option v-for="(subarea, index) in oSubareas" :key="index">{{subarea.name}}</option>
                </select>

In my original application I have a wrapped <div class="hideWhenNotSelected" around the <select element to hide it when not selected not present. But since this error fires before the class has time to remove the <div and children from the DOM, I need to now WATCH the v-model value to create a work-around to force the hide from DOM before invoking the call to print.

I will leave this Issue open until the author comments and/or closes himself. Thanks for taking your time to read my issue.

Power-kxLee / vue-print-nb

Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute') #132