无法使用 Vue 获取灵活元素的 CSS 属性值 [英] Cannot get a CSS property value of a flexible element with Vue

问题描述

我正在尝试获取一个灵活元素的 CSS width 属性，但由于某种原因它不起作用:

Codepen:https://codepen.io/anon/pen/pLEwdp?editors=1010

---

代码:

<h2 class=pa-3">非柔性</h2><v-spacer class="flexible-area grey";ref=flexibleArea"><h2 class="pa-3">当前宽度为:{{flexibleAreaWidth}}</h2></v-spacer><h2 class=pa-3">非柔性</h2></v-layout>...计算:{灵活的区域宽度(){让 elem = this.$refs.flexibleArea返回 window.getComputedStyle(elem,null).getPropertyValue("width")}}

解决方案

这是因为 $refs 仅在 渲染(挂载) 之后可用(重点是我的):

<块引用>

关于引用注册时间的重要说明:因为引用本身是作为渲染函数的结果创建的，所以您无法在初始渲染时访问它们 - 它们还不存在！ $refs 也是非响应式的，因此您不应尝试在模板中使用它进行数据绑定.

并且您声明的computed 在挂载之前执行.

换句话说，您希望您的 computed 仅在挂载后执行.

要对此进行测试，您可以检查内部变量this._isMounted.但是，由于它是内部的(并且是非响应式的)，您真的希望自己保留一个 this.isMounted 变量，如下所示.

new Vue({el: '#app',数据:{isMounted:false}，安装(){this.isMounted = true;},计算:{灵活的区域宽度(){if (!this.isMounted) 返回空值；让 elem = this.$refs.flexibleArea;返回 window.getComputedStyle(elem,null).getPropertyValue("width")}}})

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|材料+图标><link rel='stylesheet prefetch' href='https://unpkg.com/vuetify/dist/vuetify.min.css'><script src='https://unpkg.com/vue/dist/vue.min.js'></script><script src='https://unpkg.com/vuetify/dist/vuetify.min.js'></script><div id="应用程序" ><v-app id="inner"><v-布局><h2 class="pa-3">非弹性</h2><v-spacer class="flexible-area grey" ref="flexibleArea"><h2 class="pa-3">当前宽度为:{{flexibleAreaWidth}}</h2></v-spacer><h2 class="pa-3">非弹性</h2></v-layout></v-app>

I'm trying to get CSS width property of a flexible element, but for some reason it doesn't work:

Codepen: https://codepen.io/anon/pen/pLEwdp?editors=1010

---

Code:

<v-layout>
  <h2 class="pa-3">non-flex</h2>

  <v-spacer class="flexible-area grey" ref="flexibleArea">
    <h2 class="pa-3">current width is: {{flexibleAreaWidth}}</h2>
  </v-spacer>

  <h2 class="pa-3">non-flex</h2>
</v-layout>

...

computed: {
  flexibleAreaWidth () {
    let elem = this.$refs.flexibleArea
    return window.getComputedStyle(elem,null).getPropertyValue("width")
  }
}

解决方案

It's because $refs are only available after render (mount) (emphasis mine):

An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.

And that computed you declared is executed before mount.

In other words, you'll want your computed to execute only after mount.

To test that, you could check the internal variable this._isMounted. But, since it is internal (and non-reactive), you really want to keep a this.isMounted variable yourself, as shown below.

new Vue({
  el: '#app',
  data: {isMounted: false},
  mounted() {
    this.isMounted = true;
  },
  computed: {
    flexibleAreaWidth () {
      if (!this.isMounted) return null;
      let elem = this.$refs.flexibleArea;
      return window.getComputedStyle(elem,null).getPropertyValue("width")
    }
  }
})

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/vuetify/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.min.js'></script>
<script src='https://unpkg.com/vuetify/dist/vuetify.min.js'></script>

<div id="app" >
  <v-app id="inner">
    <v-layout>
      <h2 class="pa-3">non-flex</h2>
      <v-spacer class="flexible-area grey" ref="flexibleArea">
        <h2 class="pa-3">current width is: {{flexibleAreaWidth}}</h2>
      </v-spacer>
      <h2 class="pa-3">non-flex</h2>
    </v-layout>
  </v-app>
</div>

这篇关于无法使用 Vue 获取灵活元素的 CSS 属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！