vue watch中调用方法，方法里通过refs取dom节点提示undefined怎么修改？

Question

vue项目中
Error in callback for immediate watcher "data": "TypeError: Cannot read property 'clientWidth' of undefined"

      @Watch('data',{ immediate: true, deep: true })
      onChangeValue(newVal: string, oldVal: string) {
        this.getLineData();
        this.drawSvg();
      }

其中getLineData()方法中操作了dom

     const boxDom: any = this.$refs.chartsLineBox;   
     const boxWidth: number = boxDom.clientWidth;
      this.boxHeight = boxDom.clientHeight;
      const itemHeight: number = Math.floor(boxWidth /  dataCount);

Watch中监听的data是在父组件中通过axios请求到的，在mounted中调用的，不过data有初始值，这种情况应该怎么改?

Answer 1

watch方法执行的时候chartsLineBox还没渲染好吧？不知道你的业务场景是什么，可以考虑把immediate设置为false。总之确保在调用getLineData的时候chartsLineBox这个元素渲染好了。

Answer 2

boxDom?

Answer 3

说明DOM元素还没出现，获取不到属性。不用mounted，换个钩子函数

Answer 4

可以在父组件给子组件加v-if有数据再显示子组件 这样在子组件mounted时数据和节点都能拿到

Answer 5

加个延时就完了

const sleep = t => new Promise(r=>setTimeout(r, t));
 
@Watch('data',{ immediate: true, deep: true })
async onChangeValue(newVal: string, oldVal: string) {
    if(!this.$refs.chartsLineBox){
        await sleep(100)
    }
    this.getLineData();
    this.drawSvg();
}

Answer 6

我也遇到了类似的问题，我是直接在watch里通过refs获取的dom节点，但获取到设置了ref的节点时，想通过传入索引来确定具体的哪一个，就会给undefined,请问有解决方法吗