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 puted property in Vue:

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

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 puted property in Vue:

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

• javascript
• html
• css
• vue.js

Share Improve this question Follow edited Jan 23, 2018 at 7:07 Bargain23 asked Jan 23, 2018 at 7:00 Bargain23Bargain23 1,98344 gold badges3232 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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,
  }
},
puted: {
    getBannerStyle () {
        return `width: ${this.offsetWidth}px;`
    }
}

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