Question

使用 v-bind设置元素的 width 时遇到一点问题：style = ...

交易是风格的属性要求比我提供的更快（在挂载中）。我知道如何在用 width 填充我的数组之后强制更新吗？

<template>
<div>
      <div class="headings ">
        <div class="t-cell head" v-for="(header, index) in headings"
             :style="'min-width:'+ getHeight(index) +'px'"
        >
          {{header}}
        </div>
      </div>
    </div>
    <div class="fixed-table text-inline" >
        <div class="t-cell head" v-for="(header, index) in headings" :ref="'head' + index">
          {{header}}
        </div>
      </div>
  </div>
</template>

<script>

    export default {

        mounted: function(){
            this.getColumnWidths();
        },

        methods: {
          getHeight(index){
              return this.headerWidths[index];
          },
          getColumnWidths(){
            const _that=this;
            this.headings.forEach(function(element,index){
              _that.headerWidths[index] = _that.$refs['head'+index][0].clientWidth
            });
          },
        },

        data: function () {
            return {
                headings: this.headersProp,
                headerWidths:[],

              }
        }

    }
</script>

如果有一些强制更新的方法会很棒，因为宽度可能会根据插入的内容而改变。

小提琴

https://jsfiddle.net/ydLzucbf/

Answer 1

你被array caveats咬了。使用vm.$set：

，而不是分配单个数组元素（使用=）

getColumnWidths() {
  const _that = this;
  this.header.forEach(function(element, index) {
    _that.$set(_that.headerWidths, index, _that.$refs['head' + index][0].clientWidth)
  });
  console.log(this.headerWidths);
},

设置：方法的样式

小提琴

1 个答案: