Vue - setting width of an element equal to the width of another element

Question

I'm trying to dynamically set the width of my innermost element equal to the width of the outermost element using Vue:

<div id="banner-container" class="row">
    <div class="col-xs-12">
        <div class="card mb-2">
            <div class="banner banner-tag card-body" :style="getBannerStyle"></div>
        </div>
    </div>
</div>

I have the following code in Javascript and computed property in Vue:

var container = document.getElementById('banner-container').offsetWidth;
...
computed: {
    getBannerStyle () {
        return 'width: ' + container + 'px;';
    }
}

score 5 · Accepted Answer · answered Jan 23 '18 at 07:35

5

getBannerStyle is not going to be reactive because you do not access any other reactive properties within it. You need to assign a data property the offsetWidth value and reference that within getBannerStyle. Something like this should work:

mounted () {
  this.offsetWidth = document.getElementById('banner-container').offsetWidth
},
data () {
  return {
    offsetWidth: 0,
  }
},
computed: {
    getBannerStyle () {
        return `width: ${this.offsetWidth}px;`
    }
}

answered Jan 23 '18 at 07:35

The width still remains 0px. – Bargain23 Jan 23 '18 at 07:42
how about *created* instead of `mounted` @Bargain23 – Jack jdeoel Jan 23 '18 at 07:58
@DavidJorHpan still at 0. Alternatively, how do I do this in CSS instead? – Bargain23 Jan 23 '18 at 08:06

score 2 · Answer 2 · answered Jul 10 '21 at 21:18

Unfortunately, it is next to impossible to do this in pure Vue because the element may not yet have a size during any of the lifecycle hooks. Especially, if the element is not immediately visible on page load. Fortunately, all modern browser have a class that can help: ResizeObserver.

  data: () => ({
    offsetWidth: 0,
    resizeObserver: null
  }),
  mounted() {
    this.resizeObserver = new ResizeObserver(this.onResize)
    this.resizeObserver.observe(document.getElementById('banner-container'))
    this.onResize()
  },
  beforeUnmount() {
    this.resizeObserver.unobserve(document.getElementById('banner-container'))
  },
  methods() {
    onResize() {
      this.offsetWidth = document.getElementById('banner-container').offsetWidth
    }
  }

Vue - setting width of an element equal to the width of another element

2 Answers2

Linked