web-dev-qa-db-fra.com

VueJS obtient la largeur de div

J'ai un composant Vue, qui utilise la grille bootstrap. Dans le composant enfant, je voudrais obtenir la largeur actuelle d'un certain div dans le contrôleur).

voici le composant enfant:

<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>

Dans cet exemple, la largeur sera toujours 0, même si l'élément a une largeur libre lorsque je l'inspecte. Qu'est-ce qui me manque ici, le crochet monté est le dernier du cycle de vie vue à droite? Toute aide est appréciée;)

javascriptvue.jsvuejs2vue-componentvue-router
7
Jan Schmutz

Mis à part quelques fautes de frappe, le code fonctionne parfaitement. (balise de modèle de fermeture manquante)

Aucun crochet supplémentaire n'est nécessaire. La seule exception serait si vous basculez le rendu du composant dans sa méthode montée. Ensuite, vous utiliseriez quelque chose comme

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

Êtes-vous sûr que son parent a une largeur lors du montage? 100% de 0px est toujours 0px.

4
user1497119