vue.js - 防止 Vuetify 复选框检查自身？

Question

我希望在文本字段中写入后 v-checkbox 保持不变。

怎么了：

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

预期：

该复选框保持未选中状态，直到用户选中它。

代码：

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>

标签： vue.jsvuetify.js

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（布尔值）。

该复选框现在已连接以更改 answers.selected 与 v-model

输入现在已连接以使用 v-model 更改 answers.answerText