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

Posted 2023-02-23

【中文标题】Vue.js - 如何在数组对象上实现计算属性？

【英文标题】：Vue.js - How to implement Computed properties on objects of array?

【发布时间】：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 的更新（第二个）示例

【参考方案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`