How to use $refs in Render in Vue

The iView Select component used by

has one method: clearSingleSelect () . The calling method is this.$refs.nameSelect.clearSingleSelect () , which has been tested for normal use. Now if you want to call in the render function, you can"t get this.$refs.nameSelect and report undefined

related codes

h("Select", {
    ref: "nameSelect",
    props: {
        transfer: true,
        clearable: true,
    },
    on: {
        "on-change": (value) => {
            if (value === "CLEAR") {
                this.$refs.nameSelect.clearSingleSelect()
            }
        },
    },
}, this.assembleOptions(h, this.options))

how to use $refs in Render function?

add:

< hr >

this there is no problem pointing, log (this.$refs) you can see ref of other components written directly in template . The problem should be that when the render function renders the Select component, the this.$refs is not dynamically updated. So if you report undefined , is there a way to update this.$refs manually, or to get the instance rendered by the render function directly?

Javascript vue.js render

Nov.02,2021

the h you estimate is returned by the component, and this is the component where the vnode scope is located. You can change h to this.$createElement

should be the problem pointed to by this

this kind of request generally points to several problems
this points to
nameSelect through for to array
asynchronous problems $refs only after the component rendering is completed

feels like it's the problem of the arrow function in your on

< hr class= ".

there are two questions .

one is that you used the arrow function here to change the this direction from runtime to definition time.

second, the operation of getting this.$refs in render can only get the dom nodes rendered by last . Are you sure this is the effect you want?

I have also encountered this problem. Have you found a solution?

has the problem been solved? I also encountered this problem

you want to call in the render function, but you can't get this.$refs.nameSelect, so it must be a matter of rendering time to report undefined,.
render do not use this

do not use the arrow function

to paste the complete code, why do you still use template in your description? There's render. Why template??

when getting this.$refs, you have to wait for the render function to return, so you should get it in the this.nextTick function. I've tried it.

in order to continue to use jsx, this is also possible:

h = this.$createElement

return (
  <div>
     <yourElement ref={yourRefName}></yourElement>
  </div>
)

Previous: Bootstrap table implements the Filter function of each column of the table: import bootstrap-table-filter-control.js to report errors

Next: Why can tomcat handle static resources?