Vue - 将一个元素的宽度设置为等于另一个元素的宽度

Question

我正在尝试使用 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>

我在 Javascript 中有以下代码，在 Vue 中有计算属性：

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

Answer 1

getBannerStyle不会是反应性的，因为您不会访问其中的任何其他反应性属性。您需要为数据属性分配 offsetWidth 值并在getBannerStyle. 像这样的东西应该有效：

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