I am new to Vu Js.
I want to set my input checkbox to checked if the method returns true.
This is the element:
<input type="checkbox" id="checkbox" v-model="checked" />
my Method:
Vue.createApp({
data() {
return {
checked:false
};
},
computed: {
computedClass() {
return { checked: this.addGoals };
}
},
methods: {
addGoals() {
this.checked = true;
}
}
}).mount('#app');
Edit: the addGoals method will do a conditional test to determine whether the value should be checked or not
Why computed
here? What do you think would happen in checked: this.addGoals
without calling the method?
You write "if the method returns true", but your method addGoals() { this.checked = true; }
always returns undefined
...
I'll give you an example where the method returns true
and sets checkbox[checked]
:
Vue.createApp({
data() {
return {
checked: false,
};
},
created() {
this.checked = this.addGoals();
},
methods: {
addGoals() {
return true;
}
}
}).mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>
<div id="app">
<input type="checkbox" v-model="checked">
<button @click="checked = addGoals()">addGoals()</button>
<button @click="checked = false">remove checked</button>
</div>