vue+iview,table中调用input聚焦undefined问题

     <Input

                ref="input"

                v-model="row.handleContent"

                style="width: 85%"

                @on-blur="cancelEdit(index)"

                @on-enter="defineEdit('', row)"

              >

              </Input>

聚焦方式:this.$refs.input.focus()

报错[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'focus')"                                                                                                                                              错误原因:在table中设置了v-if="flag"控制了input的展示与否,当flag为true时,立即调用了focus方法,此时input还未渲染出来 ,

dom更新：在vue中，你修改了data的某一个值，并不会立即反应到该ele中。vue将你对data的更 改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了                                                                                                                      

解决方法:当flag为true时,

         this.$nextTick(() => {

              this.$refs.input.focus()

            });

解说:this.$nextTick 将回调延迟到下次DOM更新循环之后执行。

nextTick是一个异步事件,他也会把这个事件放到一个队列当中，异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行nextTick,就可以获取到dom了.setTimeout同理