我是vue新手,在option元素中的条件渲染(v-if)方面有问题。当我有一个空的数组时,我想显示一个禁用的选项,否则它会显示国家。就像这个描述中的https://vuejs.org/v2/guide/conditional.html一样,但不幸的是,这不适用于option HTML元素。我错过了什么?
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:
<div id="app">
<select @change="onChange($event.target)">
<option v-if="optionAvailable" v-for="(country,index) in countries" :value="country.population">{{ country.name }}</option>
<option v-else disabled>-</option>
</select>
<br>
<span>{{ selected }}</span>
</div>
这里是jsfiddle:
https://stackoverflow.com/questions/51143402
复制相似问题