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
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
Share Improve this question edited Feb 17 at 12:05 paul kendal23 asked Feb 17 at 11:19 paul kendal23paul kendal23 1892 gold badges3 silver badges15 bronze badges2 Answers
Reset to default 0Why 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/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>You can try the following
<script setup>
import { ref, computed } from 'vue'
const text = ref('')
const checked = computed(() => {
return text.value === 'yes'
})
</script>
<template>
<input type="checkbox" id="checkbox" v-model="checked" /> {{ checked }}
<br />
<input type="text" v-model="text" /> {{ text }}
</template>
Here is a playground.
If you want some HTML examples, you can also check this one.
If you're only using the CDN in your HTML, this is how you can write it
<script type="module">
import { createApp, ref, computed } from 'vue'
createApp({
setup() {
const text = ref('')
const checked = computed(() => {
return text.value === 'yes'
})
return {
text,
checked,
}
}
}).mount('#app')
</script>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked" /> {{ checked }}
<br />
<input type="text" v-model="text" /> {{ text }}
</div>
You mostly need to have some importmaps somewhere with the following
{
"imports": {
"vue": "https://unpkg/[email protected]/dist/vue.esm-browser.js"
}
}