How to wire a conditional block in option HTML element using vue 2
Multi tool use
How to wire a conditional block in option HTML element using vue 2
I'm new to vue and have a problem with a conditonal rendering (v-if) in an option element.
when i have an empty array i would like to show an disabled option otherwise it show me the countries. Like in this description https://vuejs.org/v2/guide/conditional.html but unfortunately this is not working on an option HTML element. What i'm missing ?
new Vue({
el: '#app',
data: {
selected: '',
optionAvailable: true,
countries: [
//{ name: 'USA', population: '300M' },
//{ name: 'Canada', population: '100M' },
//{ name: 'Germany', population: '80M' },
]
},
created() {
if(!this.countries.length > 0) {
return this.optionAvailable = false;
}
return true;
},
methods: {
onChange(event) {
this.selected = event.value;
}
}
})
html:
{{ country.name }}
-
{{ selected }}
here jsfiddle:
https://jsfiddle.net/50wL7mdz/434002/
2 Answers
2
Try this:
template
{{ country.name}}
----
{{ selected }}
script
new Vue({
el: '#app',
data: {
selected: '',
optionAvailable: true,
countries: [
{ name: 'USA', population: '300M' },
{ name: 'Canada', population: '100M' },
{ name: 'Germany', population: '80M' } ]
},
methods: {
onChange(event) {
this.selected = event.value;
}
}
})
You don't need the created hook. You can tell v-if to look at the length of countries directly.
v-if
countries
https://jsfiddle.net/z4mu8L9e/8/
try this template
No available countries
{{ country.name }}
{{ selected }}
Script
new Vue({
el: '#app',
data: {
selected: '',
countries:
},
methods: {
onChange(event) {
this.selected = event.value;
}
}
})
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
