Vue.js - 如何在数组对象上实现计算属性？答案

【问题标题】：Vue.js - How to implement Computed properties on objects of array?Vue.js - 如何在数组对象上实现计算属性？
【发布时间】：2019-04-23 03:09:10
【问题描述】：

我的 Vue 实例中有一个对象数组，我想为每个项目编写一个 Computed 属性。

每个对象只有两个属性：firstName 和 lastName。我想为每个名为 'fullName' 的 Computed 属性写一个，它只是 firstName 和 lastName 的串联。

我熟悉实现 Vue 实例的数据对象属性的计算属性，但是当涉及到数组元素时，我会感到困惑。

目前，我的代码是这样的：

var app = new Vue({
  el: '#app',
  data: {
    names: [{
        firstName: 'Mike',
        lastName: 'McDonald',
        done: false
      },
      {
        firstName: 'Alex',
        lastName: 'Nemeth',
        done: false
      },
      {
        firstName: 'Nate',
        lastName: 'Kostansek',
        done: true
      },
      {
        firstName: 'Ivan',
        lastName: 'Wyrsta',
        done: true
      }
    ]
  },
  computed: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    }      
  }
  methods: {
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
  <ol>
    <li v-for='name in names'>
      <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
      <span v-if='!name.done'>{{ fullName(name) }}</span>
      <del v-else>{{ fullName(name) }}</del>
    </li>
  </ol>
</div>

这里是各自的jsFiddle

【问题讨论】：

尽量减少模板中的函数调用次数。函数结果不会被缓存，这意味着几乎每次数据更改都会导致完全重新渲染。使用计算，通过创建一组预先计算的对象可以大大提高您的应用程序性能。请参阅@Boussadjra 的更新（第二个）示例

标签： javascript vue.js vuejs2 vue-component computed-properties

【解决方案1】：

在您的情况下，您可以使用 fullname 作为方法而不是 computed 属性：

var app = new Vue({
  el: '#app',
  data: {
    names: [{
        firstName: 'Mike',
        lastName: 'McDonald',
        done: false
      },
      {
        firstName: 'Alex',
        lastName: 'Nemeth',
        done: false
      },
      {
        firstName: 'Nate',
        lastName: 'Kostansek',
        done: true
      },
      {
        firstName: 'Ivan',
        lastName: 'Wyrsta',
        done: true
      }
    ]
  },
  computed: {

  },
  methods: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
  <ol>
    <li v-for='name in names'>
      <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
      <span v-if='!name.done'>{{ fullName(name) }}</span>
      <del v-else>{{ fullName(name) }}</del>
    </li>
  </ol>
</div>

另一种解决方案是通过连接 firstname 和 lastname 在计算属性内循环遍历 names 数组，然后返回此数组并在模板中循环遍历它

var app = new Vue({
  el: '#app',
  data: {
    names: [{
        firstName: 'Mike',
        lastName: 'McDonald',
        done: false
      },
      {
        firstName: 'Alex',
        lastName: 'Nemeth',
        done: false
      },
      {
        firstName: 'Nate',
        lastName: 'Kostansek',
        done: true
      },
      {
        firstName: 'Ivan',
        lastName: 'Wyrsta',
        done: true
      }
    ]
  },
  computed: {
    fullNames() {
      return this.names.map(name => {
        let fl = {};
        fl.fname = name.firstName + ", " + name.lastName;
        fl.done = name.done;
        return fl;
      })
    }
  },
  methods: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
  <ol>
    <li v-for='name in fullNames'>
      <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
      <span v-if='!name.done'>{{ name.fname }}</span>
      <del v-else>{{  name.fname  }}</del>
    </li>
  </ol>
</div>

【讨论】：

似乎如果必须在 Computed 属性中循环遍历 names 中的每个 name，设置方法会更容易。
我使用计算属性添加了第二个解决方案

【解决方案2】：

您不能将“计算”与参数一起使用。很可能您想使用一种方法：

例子

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(param) {
      return `${this.param} ${this.firstName} ${this.lastName}`
  }
}

【讨论】：