How to make 2 toggle buttons Yes and No checkbox with v-model in Vue?

Question

Vue.js

Good afternoon,

The mediocre option with is not suitable, because each of the 2 buttons is exactly a switch from Yes to No and back . These checkboxes go in a v-for loop . I give an option where I tried to use pure JS for clicking buttons:<label: for="id-of_checkbox">

<div class="form-group" v-for="attribute in attributes">
            <input :id="getInputId(attribute)"
                   type="checkbox"
                   v-model="definedAttributes[makeKey(attribute)]"/>

            <button class="btn btn-primary" @click="checkBoxYes(attribute)">Да</button>
            <button class="btn btn-primary" @click="checkBoxNo(attribute)">Нет</button>
        </div>

export default {
        ...
       data() {
            return {
                attributes: [], // наполняется посредством rest API
                definedAttributes: {}, // формируется за счет прокликивания чекбоксов
            }
        },
           methods: {
                checkBoxYes(attribute) {
                // некое условие

                let selector = this.getInputId(attribute);

                // выводится правильный id чекбокса как в разметке (как формируется - неважно)
                console.log('selector', selector); 

                 // гаолчка ставится только визуально, объяект definedAttributes не переопределяется, реактивности нет
                document.getElementById(selector).checked = true;
            },
            checkBoxNo(attribute) {
                    // аналогично
            },
     }
}

I also tried to override the object in the checkBoxYes method via Object.assign :

this.definedAttributes = Object.assign(this.definedAttributes, {[computedKey]: true});
                // В консоли изменения видны, но реактивности нет
                console.log('this.definedAttributes', this.definedAttributes)

Reactivity only works if you click on the checkboxes with the mouse.

Please tell me a way - to reactively bind 2 buttons ( true and false ) and a checkbox?

The checkbox ( v-model of each iteration element) should not be displayed later, only YES and NO )

PS

But strange thing, when I click on the YES button, nothing reactively and visually happens, but if I click on the checkbox of another iteration, then everything appears in the object keys with values, previously triggered by button clicks.

Maybe there is some way to force reactivity synchronization?

this.$nextTick(); did not help

Answer 1

https://jsfiddle.net/zt8cy0vx/