[Vuejs]-Prevent vuetify checkbox from checking itself?

by

0👍

✅

Seems like I must have been to tired or drunk when I posted this 😉

Here is the completely new revised code I did to fix this solution:

<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>

What has changed?

I deleted all the previous code that was broken and necessarily complex.

I created a new data array with the objects answers. Each object now has the answerText (string) and the selected (boolean).

The checkbox is now connected to change the answers.selected with v-model

The input is now connected to change the answers.answerText with v-model

Leave a comment