Question

如果这是一个简单的问题，我表示歉意。

我有一个在vue.js中构建的表

A列用于数字输入，B列具有预设值，C列计算它们之间的差。

当前，我使用的是一个计算属性，该属性遍历各行，计算差异并将其存储在我的数据数组中，然后在表单元格中调用值{{row.difference}}。

我称其为计算属性差异，但是只有在元素div中包含{{difference}}时，该差异才有效。

用法不好吗？我应该改为在每行上调用一个方法并返回计算出的值吗？

Answer 1

计算值永远不应使数据突变。

我建议您计算出的值返回一个新数组，其中包含差异。

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {

    items: [{
        a: 10,
        b: 4
      },
      {
        a: 443,
        b: 23
      }
    ]

  },
  computed: {
    items_with_difference() {
      return this.items.map((i) => ({
        ...i,
        difference: i.a - i.b
      }));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <thead>
      <th>
        A
      </th>
      <th>
        B
      </th>
      <th>
        Difference
      </th>
    </thead>
    <tbody>
      <tr v-for="(item, idx) in items_with_difference" :key="idx">
        <td>
          {{item.a}}
        </td>
        <td>
          {{item.b}}
        </td>
        <td>
          {{item.difference}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

我应该在这里使用计算属性吗？

1 个答案: