从 vue.js 中渲染列表中的数组访问数据答案

【问题标题】：Accessing data from array in rendered list in vue.js从 vue.js 中渲染列表中的数组访问数据
【发布时间】：2023-03-06 17:53:02
【问题描述】：

我正在尝试使用渲染列表中的属性，该属性可能会根据复选框是否被填充而改变。但是，mathSkill 和 scienceSkill 总是显示 0。我觉得我在尝试访问 booleanValue 时做错了什么，但我不确定我还可以在 if 语句中添加什么以允许它更新值。如果您有任何见解，请提前感谢您！

const app = new Vue({
  el: '#app',
  data: {
    abilities: [
      { value: 'math', id: 'math', booleanValue:'no' },
      { value: 'science', id: 'science', booleanValue:'no'},
      { value: 'english', id: 'english', booleanValue:'no'},
     ],
    // VARIABLES
    mathSkill: 0,
    scienceSkill: 0,
  },
  computed: {
    addToMath: function() {
      if (this.abilities[0] === 'yes' )
        mathSkill = mathSkill +1,
        scienceSkill = scienceSkill + 1; 
    }
}

【问题讨论】：

this.abilities[0] 给你一个对象。您需要继续从[0] 链接访问器方法以定位该属性
我试过 this.abilties[0].booleanValue 还是没有运气！还是我完全关闭了？谢谢
谢谢你这已经奏效了。我忘了在计算的 if 语句中使用它。

标签： vue.js computed-properties

【解决方案1】：

我不知道你想要完成什么。

如果要计算变量，请不要定义变量。

使用.filter根据某些条件创建一个新数组，并使用.length获取该数组中有多少个对象

computed: {
    matchSkill() { return this.abilities.filter(ability => ability.booleanValue === "yes").length},
}

Example code

【讨论】：

好吧，我想根据是否选中复选框进行一些计算，更改布尔值。因此，仅过滤 yes 与“math”结合，例如修改 mathSkil 值。谢谢！我会试试这个。