为什么在打开模式时'$el.clientWidth‘等于0？(Vue.js)

Question

因此，我正在尝试获取我的Vue.js网站中的一个模式元素的宽度。当模式打开时，当我console.log它时，宽度是0，但它显然不是0，因为当模式打开时元素是可见的。当模式关闭时，控制台记录值>0。

这是一个CodePen：https://codepen.io/chataolauj/pen/RwwYxBg?editors=1010

watch: {
    showAdd() {
        console.log(this.$refs.input.$el.clientWidth)
    }
}

Answer 1

因为元素的实例化是在这个生命周期的mounted之后，所以你可以实际得到它的长度。但showAdd的变化先于mounted。那么实际上你得到了0。

根据您的代码，您可以尝试这样做

showAdd() {
  setTimeout(()=>{
      console.log(this.$refs.input.$el.clientWidth)
  }, 400)
}

而且它也受到动画因素的影响，这一次是关于.3s的，所以Vue.nextTick不会工作，使用setTimeout(()=>{}, 400)也是一个不错的解决方案，除非你监听动画事件。