VueJS获得Div的宽度

时间:2017-09-21 13:58:24

标签: javascript vue.js vuejs2 vue-component vue-router

我有一个使用引导网格的Vue组件。在子组件中,我想获得控制器中某个div的当前宽度。

继承了儿童组成部分:

<template>
    <div id="bg-prev" ref="prev">
        <h1>{{x}}</h1>
    </div>
<template>

export default {
  props: ['section'],
  data() {
    return {
      x: 0,
      y: 0,
    }
  },
  mounted() {
    this.getWindowWidth();
  },
  methods: {
    getWindowWidth() {
      this.x = this.$refs.prev.clientWidth;
    }
  }
};
<style>
    #bg-prev {
      width: 100%;
    }
</style>

在此示例中,宽度将始终为0,即使我检查它时元素的宽度是清晰的。我在这里缺少什么,挂钩是vue生命周期中的最新版本吧?任何帮助表示赞赏;)

1 个答案:

答案 0 :(得分:2)

除了一些拼写错误之外,代码完全正常工作。 (缺少关闭模板标签)

不需要额外的钩子。如果您在其安装的方法中切换组件的渲染,则只有例外。然后你会使用像

这样的东西
With ActiveCell
    .FormulaR1C1 = "=CONCAT(" & .Parent.Name & "!RC[-13]:RC[-1])"
End With

你确定它的父母在安装时有宽度吗? 100%的0px仍为0px。