web-dev-qa-db-ja.com

VueJSはDivの幅を取得します

Vueコンポーネント、bootstrapグリッドを使用しています。子コンポーネントで、コントローラの特定の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ライフサイクルで最新のものですか？どんな助けでもありがたいです;）

javascriptvue.jsvuejs2vue-componentvue-router
7
Jan Schmutz

いくつかのタイプミスを除いて、コードは完全に機能しています。 （終了テンプレートタグがありません）

追加のフックは必要ありません。唯一の例外は、コンポーネントのマウントされたメソッドでコンポーネントのレンダリングを切り替える場合です。次に、次のようなものを使用します

const that = this
that.showDiv = true
that.$nextTick(function () {
  that.getWindowWidth()
})

親がマウント中に幅を持っていることを確認しますか？ 0pxの100％はまだ0pxです。

4
user1497119