Vue.js - 未计算组件高度和宽度

编程问答 2022-05-30

问题描述

我的组件中有以下代码：

computed: {
    gridWidth()  { return (this.$el && this.$el.offsetWidth)  },gridHeight() { return (this.$el && this.$el.offsetHeight) },},mounted(){
    console.log(this.$el && this.$el.offsetWidth,this.gridWidth,this.$el && this.$el.offsetHeight,this.gridHeight)
},

控制台输出为：

1766 undefined 931 undefined

为什么计算属性未定义？

会以正确的方式成为观察者吗？为什么以及如何实现？

解决方法

这基本上与 reactivity in Vue 的工作原理有关。默认情况下，您的 DOM 不会持续提供更新的值。

您可以使用 vm.$nextTick 和 vm.$watch 在渲染完成后基本上附加一个观察者，或者您可以使用一个小型库来满足您的需求：>

vue-resize-directive

computed-propertiesvue.js