Question

我有下一个JSON：

UIDocumentInteractionController

我将使用下一个代码显示：

"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,
}

这是我的工作方向，因为所有这些都是从大项目中划分出来的。但是在mostry中还可以。

我需要在<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>计数达到n时禁用复选框。例如，如果用户单击绿色和红色，则无法单击任何其他项目。

使用Vue进行此操作的最佳方式是什么？

Answer 1

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

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

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

希望这有帮助。

启用/禁用项目如何依赖于JSON中的计数器？

1 个答案: