是否阻止vuetify复选框检查自身

Question

在文本字段中写入后，我希望v复选框保持不变

发生了什么：

每当我在框外单击或在下面的文本字段中键入时，复选框都会自行检查。

预期：

复选框保持未选中状态，直到用户选中为止。

代码：

export default {
props: ['answer'],
data() {
return {
newAnswer: 'Your answer here...',
multiChoiceAnswers: {
answers: ['test1', 'test2'],
selected: [],
}
}
},
created() {
if (this.answer.answers.length > 1) {
this.multiChoiceAnswers.answers = this.answer.answers
this.multiChoiceAnswers.selected = this.answer.selected
} else {
console.log('Answer Template Generated')
}
},
methods: {
selectedAnswer(clickEvent, index) {
console.log(clickEvent, index)
//Checking wether or not the answer is a value or null
//in order to push or remove it from the selected answers
if (clickEvent === this.multiChoiceAnswers.answers[index]) {
this.multiChoiceAnswers.selected.push(clickEvent)
} else {
const selectedPosition = this.multiChoiceAnswers.selected.indexOf(this.multiChoiceAnswers.answers[index])
this.multiChoiceAnswers.selected.splice(selectedPosition, selectedPosition + 1)
}
this.$emit('newAnswer', this.multiChoiceAnswers)
},
changedAnswer(changedAnswer, index) {
console.log(changedAnswer)
//Getting previous selected answer position to replace later
const selectedPosition = this.multiChoiceAnswers.selected.indexOf(this.multiChoiceAnswers.answers[index])
//Changing the current value of answer[index] to input value in answers
this.multiChoiceAnswers.answers.splice(index, index + 1, changedAnswer)
//Changing the current value of answer[index] to input value in selected
this.multiChoiceAnswers.selected.splice(selectedPosition, selectedPosition + 1, changedAnswer)
this.$emit('newAnswer', this.multiChoiceAnswers)
},

这是模板代码：

<v-container>
<div :key="(answer, index)" v-for="(answer, index) in multiChoiceAnswers.answers">
<v-layout align-center>
<v-checkbox hide-details class="shrink mr-2" @click.prevent @change="selectedAnswer($event, index)" :value="answer"></v-checkbox>
<v-text-field class="checkbox-input" @input="changedAnswer($event, index)" :placeholder="answer"></v-text-field>
<v-btn @click="removeAnswer(index)">Remove</v-btn>
</v-layout>
</div>
</v-container>

Answer 1

当我发布这篇文章时，我一定是累了或喝醉了；(

以下是我为修复此解决方案所做的全新修订代码：

<template>
<div>
<v-container>
<div :key="(answer, index)" v-for="(answer, index) in multiChoiceAnswers.answers">
<v-layout align-center>
<v-checkbox hide-details class="shrink mr-2" v-model="answer.selected"></v-checkbox>
<v-text-field class="checkbox-input" v-model="answer.answerText" :placeholder="answer.answerText"></v-text-field>
<v-btn @click="removeAnswer(index)">Remove</v-btn>
</v-layout>
</div>
</v-container>
<v-btn @click="newAnswerOption">Add Answer</v-btn>
</div>

<script>
export default {
props: ['answer'],
data() {
return {
newAnswer: { answerText: 'Your answer here...', selected: false },
multiChoiceAnswers: {
answers: [
{ answerText: 'test1', selected: false },
{ answerText: 'test2', selected: false }
],
},
}
},
created() {
if (this.answer.answers.length > 1) {
this.multiChoiceAnswers.answers = this.answer.answers
} else {
console.log('Answer Template Generated')
}
},
methods: {
newAnswerOption() {
this.multiChoiceAnswers.answers.push(this.newAnswer)
this.$emit('newAnswer', this.multiChoiceAnswers)
},
removeAnswer(index) {
//Removing the answer
this.multiChoiceAnswers.answers.splice(index, 1)
this.$emit('newAnswer', this.multiChoiceAnswers)
}
}
}
</script>

发生了什么变化？

我删除了所有以前的代码，这些代码已经损坏并且一定很复杂。

我用对象答案创建了一个新的数据数组。现在，每个对象都有answerText(字符串(和selected(布尔值(。

复选框现在已连接，可更改使用v型选择的答案

输入现在已连接以更改答案。answerText带有v型