如何在Vue.js中选中复选框？

我试图通过选中Vue.js上的复选框来获得总分，但当单击同一复选框时，我无法从总分中减去

{{data.title}


{{title.question}


托普拉姆·普安：{{totalScore}
从“/dataMixin”导入{dataMixin}
导出默认值{
mixin:[dataMixin]，
数据（）{
返回{
勾选：假，
问题数据：[]，
选定：[]，
总分：0
}
},
方法：{
总计（数据ID，标题ID）{
this.questionData.forEach（数据=>{
data.questions.forEach（元素=>{
if（dataId==data.id&&titleId==element.id）{
this.checked=！this.checked；
if（this.checked==true）{
this.totalScore+=element.score
}
否则{
this.totalScore-=element.score
}
}
});
});
}
},
创建（）{
这是getDataQuestions（）
。然后（响应=>{
this.questionData=response.data；
console.log（this.questionData）
})
}
}

示例JSON数据

[
{
“id”：1，
“标题”：“Sözleşme Doğrulaması”，
“问题”：[
{
“id”：1，
“问题”：“Geliştirici tüm isterleri karşlayabileceği güvenini vermektedir。”，
“分数”：5分
},
{
“id”：2，
“问题”：“sterler tutarlıolup kullanıcıgereksinimlerini kapsamaktadır.”，
“分数”：5分
}
]
}
]

---

在我看来，使用数组存储选定的值不是一个好的设计（使用

选中的
布尔值更糟糕）。您的问题有一个非常好的、功能强大的对象结构，我们可以很容易地处理它

您的问题结构可以很容易地被视为：

[
{
“id”：1，
“标题”：“第1组”，
“问题”：[
{
“id”：1，
“问题”：“一个问题”，
“得分”：5分，
“选定”：false
},
{
“id”：2，
“问题”：“另一个问题”，
“得分”：5分，
“选定”：false
}
]
},
{ ... }
]

因此，很容易计算每个问题组的总分：

const groupScore=group.questions
.减少（（分数，问题）=>question.selected？分数+问题。分数：分数，0）

获得每个问题组的分数后，您可以计算总分：

const totalScore=groupScoreArray.reduce（（total，groupScore）=>total+groupScore，0）


因此，给定上面的数据结构，您可以使用computed属性来计算总分


问题数据中的（数据、索引）：key=“index”>

{{data.title}



{{标题.问题}



托普拉姆·普安：{{totalScore}

导出默认值{
数据（）{
返回{
问题数据：[{
“id”：1，
“标题”：“Sözleşme Doğrulaması”，
“问题”：[{
“id”：1，
“问题”：“Geliştirici tüm isterleri karşlayabileceği güvenini vermektedir。”，
“分数”：5分
}, {
“id”：2，
“问题”：“sterler tutarlıolup kullanıcıgereksinimlerini kapsamaktadır.”，
“分数”：5分
}]
}, {
“id”：2，
“标题”：“Sözleşme Doğrulaması”，
“问题”：[{
“id”：1，
“问题”：“Geliştirici tüm isterleri karşlayabileceği güvenini vermektedir。”，
“分数”：2分
}, {
“id”：2，
“问题”：“sterler tutarlıolup kullanıcıgereksinimlerini kapsamaktadır.”，
“分数”：3分
}]
}]
};
},
计算：{
总分（）{
const scoreMap=this.questionData.map（questionItem=>
问题项。问题。减少（（总和，q）=>{
返回所选q？总和+q分数：总和
}, 0));
返回scoreMap.reduce（（总和，分数）=>sum+score，0）；
}
}
}

这是我当地环境中的一个工作示例(vue@2.6.10，vue-cli@4.0.0)，这是一个代码笔：
尝试使用@change而不是@click on checkbox字段。尝试将
v-model=“selected”
更改为“`v-model=“checked”`.@mert.js”以备将来参考。它是sis（我是女性），很乐意提供帮助，如果这个答案能解决你的问题，请接受它！：-）