Vue checkbox checked dynamically:In Vue, you can dynamically check or uncheck a checkbox by binding the “checked” attribute to a data property using the v-model directive. When the data property is updated, the checkbox will reflect its current state accordingly. For example, you could have a data property named “isChecked” that is initially set to false, and then bind it to the checkbox using v-model. When the “isChecked” property is set to true, the checkbox will become checked, and vice versa. This provides a convenient way to control the state of a checkbox based on user interactions or other dynamic changes within your application.

How can I dynamically set the checked status of a Vue checkbox?

This is a Vue app that has a dropdown select and a checkbox. The checkbox is dynamically checked based on the selected option in the dropdown.

The app uses Vue’s data, computed, and watch properties to achieve this. The data property contains two variables: selectedOption and isChecked.

The computed property checks if the selected option is ‘option2’ and returns a boolean value.

The watch property watches for changes in the computed property and updates the isChecked variable accordingly. If the selected option is ‘option2’, the checkbox is marked as checked.

Vue checkbox checked dynamically Example

<div id="app">
        <select v-model="selectedOption">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
        <br>
        <p>If we choose the second option from the dropdown, the checkbox will be marked as checked dynamically </p>
        <input type="checkbox" v-model="isChecked" :disabled="!isOption2Selected"> Checkbox
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    selectedOption: '',
                    isChecked: false
                }
            },
            computed: {
                isOption2Selected() {
                    return this.selectedOption === 'option2';
                }
            },
            watch: {
                isOption2Selected(newValue) {
                    // Check the checkbox when option 2 is selected
                    if (newValue) {
                        this.isChecked = true;
                    }
                }
            }
        });
        app.mount('#app');
    </script>

Output of Vue checkbox checked dynamically