CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuejs2
Mark
Mark

Reputation: 466

why does the width of my vue component report "undefined"?

I'm attempting to access the width of a vue component so I can dynamically scale the content it is holding. Unfortunately, vue is reporting the "width" to be "undefined" throwing my plans up into the air somewhat.

I am accessing the control in question via a this.$refs.

I am querying the width in a nextTick() function.

How do I access the width of this component?

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

Resize handler

    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
        }
      })
    },

This is the logged ref... v-component log extract

This is the component in question (the long grey one, which definitely has width)

enter image description here

Upvotes: 1

Views: 1646

Answers (1)

Dan
Dan

Reputation: 63139

Components are logical entities, not DOM elements; they have no width. Unlike a standard tag, when a ref is placed on a component tag, it accesses its Vue reference, not a DOM element. Additionally, the width property you screenshotted isn't what you're logging anyway, it's clientWidth, and correctly.

Use the $el property of the component to access its DOM root:

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

Upvotes: 2

Related Questions