在Vue中取消选中父级下级中的已回答问题,可以通过以下步骤实现:
下面是一个示例代码:
父组件:
<template>
<div>
<child-component v-for="(question, index) in questions" :key="index"
:question="question" :answered="answeredQuestions.includes(index)"
@toggle-answer="toggleAnswer(index)">
</child-component>
</div>
</template>
<script>
export default {
data() {
return {
questions: ['Question 1', 'Question 2', 'Question 3'],
answeredQuestions: [] // 存储已回答问题的状态
};
},
methods: {
toggleAnswer(index) {
if (this.answeredQuestions.includes(index)) {
// 如果已回答问题的状态中包含当前问题的索引,则取消选中
const i = this.answeredQuestions.indexOf(index);
this.answeredQuestions.splice(i, 1);
} else {
// 否则,选中当前问题
this.answeredQuestions.push(index);
}
}
}
};
</script>
子组件:
<template>
<div>
<label>
<input type="checkbox" v-model="answered" @change="toggleAnswer">
{{ question }}
</label>
</div>
</template>
<script>
export default {
props: ['question', 'answered'],
methods: {
toggleAnswer() {
this.$emit('toggle-answer', this.answered);
}
}
};
</script>
在上述示例中,父组件中的questions数组存储了所有的问题,answeredQuestions数组存储了已回答问题的状态。子组件中的v-model指令绑定了answered属性,表示该问题是否已回答。当复选框的状态发生变化时,触发change事件,并通过$emit方法将问题的状态传递给父组件。父组件中的toggleAnswer方法根据传递的问题状态来更新answeredQuestions数组,从而实现取消选中父级下级中的已回答问题的功能。
请注意,上述示例中的代码仅为演示取消选中已回答问题的基本思路,实际应用中可能需要根据具体需求进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云