perché la larghezza del mio componente vue segnala "undefined"?

Question

Sto tentando di accedere alla larghezza di un componente vue in modo da poter ridimensionare dinamicamente il contenuto che sta tenendo. Sfortunatamente, vue sta segnalando che la "larghezza" è "indefinita", lanciando un po 'i miei piani in aria.

Sto accedendo al controllo in questione tramite un this. $ Refs.

Sto interrogando la larghezza in una funzione nextTick ().

Come accedo alla larghezza di questo componente?

 <v-card class="d-flex flex-row ma-6" color="grey" flat tile outlined min-height="30" ref="tlbox">
    <v-card class="d-flex flex-row" v-for="file in this.layer.timeline" :key=file.index >
      <v-tooltip top>
        <template v-slot:activator="{on,attrs}">
          <v-card class="" color="black" :width=getOffsetWidth(file) >
          </v-card>
          <v-card class="" color="red" width="1" >
          </v-card>
          <v-card v-bind="attrs" v-on="on" class="pa-2" color="grey darken-2" outlined tile :width=getWidth(file) >
          </v-card>
        </template>
        <span>{{ file.src_clip_name }}</span>
      </v-tooltip>
    </v-card>

Ridimensiona gestore

    handleResize() {
      window.console.log('mth:handleResize')
      window.console.log(this.$store.state.link.duration)
      this.$nextTick(() => { this.tlwidth = this.$refs['tlbox'].clientWidth
        window.console.log(this.$refs['tlbox']) window.console.log(this.tlwidth) if (this.$store.state.link.duration > 0) {
          this.scalefactor = this.tlwidth / this.$store.state.link.duration
        }
      })
    },

Questo è il riferimento registrato ...

Questo è il componente in questione (quello lungo grigio, che ha sicuramente larghezza)

Answer 1

I componenti sono entità logiche, non elementi DOM; non hanno larghezza. A differenza di un tag standard, quando un riferimento viene posizionato su un tag di un componente, accede al suo riferimento Vue, non a un elemento DOM. Inoltre, la widthproprietà che hai catturato non è quella che stai registrando comunque, lo è clientWidthe correttamente.

Usa la $elproprietà del componente per accedere alla sua radice DOM:

console.log(this.$refs['tlbox'].$el.clientWidth);