enable/disable 项如何依赖于 JSON 中的计数器？

Question

我有下一个JSON：

"questions": 
{
    "id": 1, "question": "Select one color", "answers": [
                {"id": 1, "answer" : "Green", "isSelected" : false}, 
                {"id": 2, "answer": "Red", "isSelected" : false}, 
                {"id": 3, "answer": "Blue", "isSelected" : false],
                {"id": 4, "answer": "Black", "isSelected" : false],
    "MaxAllowedChoice" : 2,
}

我显示在下一个代码中：

 <div v-for="question in questions">
    <div v-for="firstLevelAnswer in questions.answers">                
      <span class="firstLevelAnswer"><input type="checkbox" class="big-checkbox" v-model="firstLevelAnswer.isSelected"/>{{firstLevelAnswer.answer}}</span>
      <span v-if="firstLevelAnswer.isTextInput"><input type="text"/></span>
           |  firstLevelAnswer.isSelected: {{firstLevelAnswer.isSelected}}
</div>

这是我的非工作目录，因为它们都是从大项目中剥离出来的。但在大多数情况下还可以。

我需要在 MaxAllowedChoice 计数达到 n 时禁用复选框。例如，如果用户点击了绿色和红色，他就不能点击任何其他项目。

使用 Vue 的最佳方法是什么？

Answer 1

演示：https://jsfiddle.net/d1rxbe0o/

您可以使用 Array.prototype.filter() 筛选出特定问题的所有选定答案，并将结果的长度与 MaxAllowedChoice 进行比较。

然后，你应该将比较结果绑定到disabled 属性。

希望这对您有所帮助。

enable/disable 项如何依赖于 JSON 中的计数器？

How enable/disable item depend on counter in JSON?

json

vue.js