如何watch dom

倒吊人
  • 35

如何watch dom

<template lang="html">
<div class="a">
  <div class="goods-container">
      <div class="goods-left" ref="leftScroll">
        <ul>
          <li class="goods-left-list" :class="{'active':currentIndex===idex}" v-for="(item,idex) in goods" :key='item.name' @click="tofood(idex)">
            <span class="text border-1px">
              <span class="icon" v-if="item.type>0" :class="icon[item.type]"></span>{{item.name}}
            </span>
          </li>
        </ul>
      </div>
data() {
    return {
      goods: [],
      icon: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
      listHeight: [],
      scorllY: 0,
      foodInfo: {},
      dom: this.$refs.leftScroll
    };
  },
``

watch: {

dom(newvalue,oldvalue) {
  console.log("aaa");
  console.log(newvalue+"-------"+oldvalue);
}

},


无论是普通dom 还是for 循环的都watch 不了 (普通的是不是因为没有变化才没有监听到)  
但打印data 中的 数据dom  显示undefinde
回复
阅读 3.9k
6 个回答
seamo
  • 4
新手上路,请多包涵

你看下你的是编译模式还是引入vue.js模式?编译模式才支持

data()的时候还没有渲染视图this.$refs.leftScroll这个东西应该是undefined

VUE 核心不是数据驱动吗。这样不太适合VUE

你在data里面初始化dom这个变量并不能使你的dom节点跟变量产生引用关系。
但是你可以这样写,举个?:

export default {
    computed: {
        dom () {
            return this.$refs.leftScroll || ''
        }
    },
    watch: {
        dom(newValue, oldValue) {
          console.log("aaa")
          console.log(newValue + '-------' + oldValue)
        }
    }
}

watch本身就是监听数据变化,才能执行,你监听dom,dom都没有变化,当然不行,举个例子,你如果将dom的值随便定义为某个值,当你在vue生命周期或者通过某个按钮点击事件去修改dom的值,那么你会发现,你就能监听到dom的值了。还有this.$refs.leftScroll这样是不能直接定义在data对象的数据中的,如果你想访问this.$refs.leftScroll,请用计算属性。或者在函数当中使用Vue.nextTick()方法,在这个方法里获取。看这个watch示例。你就知道watch的用法了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏