Set Value of lightning-combobox

Question

How would I set the value in the following lightning-combobox? I was using this to set a variable but I the console.log really does not give me what I'm looking for. When I run the following...

let inp = this.template.querySelectorAll('[data-id="ownerfilter"]'); console.log('2 here is the value of the inp ' + inp);

I get [object NodeList]{ key: {"namespace":"c"} } in the console.

<lightning-combobox
            lwc:ref="myDiv"
                data-id="ownerfilter"
                name="ownerfilter"
                label="Select Owner" 
                options={ownerChoices}
                placeholder="Select Owner"
                value={value}
                onchange={ownerfilterchange}
                class="FilterStyle">
            </lightning-combobox>

Any help is greatly appreciated!!

Frank

Answer 1

querySelectorAll returns an Array-like object called a NodeList. From there the + operator on strings returns the value of toString(), which is why you see [object NodeList] as part of the output.

Instead:

console.log(this.template.querySelector('[data-id="ownerfilter"]').value);

or:

console.log(this.refs.myDiv.value);

You should get out of the habit of using + in console.log. Use the comma operator instead to see interactive values:

console.log('this is the value:', this.refs.myDiv.value);