正文

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

 2023-02-23  288

关键词：

【中文标题】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`

【讨论】：

如何使用 Vue.js 为数组（数据）中的所有对象添加属性？

】如何使用Vue.js为数组（数据）中的所有对象添加属性？【英文标题】：HowtoaddapropertytoALLobjectsinanarray(data)usingVue.js?【发布时间】：2020-09-1214:53:51【问题描述】：背景：我在data()中有一个数组，其中填充了来自后端的对象。如果G... 查看详情

如何在对象上实现 GetHashCode()？ [复制]

】如何在对象上实现GetHashCode()？[复制]【英文标题】：HowdoyouimplementGetHashCode()onobjects?[duplicate]【发布时间】：2010-10-0106:56:46【问题描述】：重复：WhatisthebestalgorithmforanoverriddenSystem.Object.GetHashCode?如果您编写了一个包含多种数据成... 查看详情

如何在属性更改 QML 上实现行为动画

】如何在属性更改QML上实现行为动画【英文标题】：HowtoimplementbehavioranimationonpropertychangesQML【发布时间】：2021-09-1513:32:12【问题描述】：单击图像时，我正在尝试更改scale属性，但我希望它慢慢更改。现在，当我单击图像时，我... 查看详情

vue.js：如何从数组中的对象进行计算？

】vue.js：如何从数组中的对象进行计算？【英文标题】：vue.js:Howtodocalculationfromobjectinanarray?【发布时间】：2020-01-2214:25:34【问题描述】：我尝试了不同的方法，但没有得到想要的结果。我想从每个数组中得到产品答案的总和，但... 查看详情

访问 Vue JS 实例监视对象中的 $refs 数组

...据表中的filteredItems计算属性设置一个变量，但我不确定如何访问$refs数组在实例内部。我知道查看详情

Vue.js - 如何按特定属性对数组中的对象进行排序并使用“v-for”进行渲染

】Vue.js-如何按特定属性对数组中的对象进行排序并使用“v-for”进行渲染【英文标题】：Vue.js-howtosortandobjectsinsidethearraybyparticularpropertyandrenderitwith"v-for"【发布时间】：2019-08-1708:42:24【问题描述】：我有一个数组，里面有... 查看详情

如何在 Vue.js 中创建 Date(now) 以在计算属性中使用？

】如何在Vue.js中创建Date(now)以在计算属性中使用？【英文标题】：HowtocreateDate(now)withinVue.jstouseinacomputedproperty?【发布时间】：2019-10-0421:54:19【问题描述】：我有一组带有预先格式化日期的日历事件：20190517T010000Z。我需要根据以... 查看详情

如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定？

】如何使用ngModel在div的innerhtml属性上实现2路数据绑定？【英文标题】：Howtoachieve2waydatabindingonadiv\'sinnerhtmlpropertyusingngModel?【发布时间】：2019-10-1216:56:47【问题描述】：在我的角度组件ts文件中，我有一个模型，其值为html格式的... 查看详情

数据对象无法在 VUE js 3 中的计算属性内求和

】数据对象无法在VUEjs3中的计算属性内求和【英文标题】：DataObjectunabletosummationinsidethecomputedpropertiesinVUEjs3【发布时间】：2021-07-0514:03:45【问题描述】：让我们看看vue.js3中的以下代码段，<template><div><h2>ComputedTotal-get... 查看详情

从 Vue.js 2 中的计算属性中推送到数组

】从Vue.js2中的计算属性中推送到数组【英文标题】：PushtoanarrayfromwithinacomputedpropertyinVue.js2【发布时间】：2017-06-0122:51:51【问题描述】：我希望在Vue.js2的计算属性中从with推送到数组，Vue正在Laravel中使用，我得到以下响应。createS... 查看详情

Vue.js 如何从方法更改计算属性？

】Vue.js如何从方法更改计算属性？【英文标题】：Vue.jshowtochangecomputedpropertyfromamethod?【发布时间】：2021-03-1300:48:30【问题描述】：例如，我有一个具有:disabled="isDisabled"属性的按钮其中isDisabled是一个返回布尔值的计算属性... 查看详情

如何在 SQLAlchemy ORM 上实现对同一属性的自引用多对多关系？

】如何在SQLAlchemyORM上实现对同一属性的自引用多对多关系？【英文标题】：HowcanIachieveaself-referencingmany-to-manyrelationshipontheSQLAlchemyORMbackreferencingtothesameattribute?【发布时间】：2012-02-2509:05:20【问题描述】：我正在尝试使用SQLAlchemy... 查看详情

如何在Vue js的方法中获取计算的属性数据？

】如何在Vuejs的方法中获取计算的属性数据？【英文标题】：HowtogetcomputedpropertydatainmethodinVuejs?【发布时间】：2020-10-0200:40:44【问题描述】：我有一个计算属性computed:totalwishlistItems()consttotalwishlistItems=this.itemsconsttotalreversedItems=total... 查看详情

Vue.js 插槽 - 如何在计算属性中检索插槽内容

】Vue.js插槽-如何在计算属性中检索插槽内容【英文标题】：Vue.jsslots-howtoretrieveslotcontentincomputedproperties【发布时间】：2021-02-2703:21:43【问题描述】：vue.jsslots有问题。一方面，我需要显示插槽代码。另一方面，我需要在textarea中... 查看详情

自定义 UnmarshalYAML，如何在自定义类型上实现 Unmarshaler 接口

】自定义UnmarshalYAML，如何在自定义类型上实现Unmarshaler接口【英文标题】：CustomUnmarshalYAML,howtoimplementUnmarshalerinterfaceoncustomtype【发布时间】：2018-09-0621:30:22【问题描述】：我解析一个.yaml文件，需要以自定义方式解组其中一个属... 查看详情

如何在 apache felix 上实现异步处理？

】如何在apachefelix上实现异步处理？【英文标题】：HowdoIimplementasynchronousprocessingonanapachefelix?【发布时间】：2017-02-0707:09:02【问题描述】：在我们当前的项目中，我们需要异步进行一些计算。我们在ApacheFelix4上使用带有bndtools的OSG... 查看详情

如何在 vue.js 中将类型数组对象更改为格式对象而不使用循环方法？

】如何在vue.js中将类型数组对象更改为格式对象而不使用循环方法？【英文标题】：howtochangetypearrayobjecttoformatobjectwithoutloopingmethodinvue.js?【发布时间】：2019-08-2101:18:29【问题描述】：如何在vue.js中将类型数组对象更改为格式对象... 查看详情

使用 Vue.js 中的方法过滤计算属性的数组

】使用Vue.js中的方法过滤计算属性的数组【英文标题】：FilterarrayofacomputedpropertyusingamethodinVue.js【发布时间】：2021-06-2817:22:00【问题描述】：我希望这不是一个愚蠢的问题。我有一个列出ALL课程的计算属性。当用户单击一个调用... 查看详情