我正在用VueJS创建一个下拉列表。我希望能够根据所选的选项动态显示div。
以下是代码
export default {
data(){
return{
selected: "Choose Option",
options: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
}
},
}
<template>
<div id="app" class="ui grid">
<div>
<select class="ui dropdown" v-model="selected">
<option>Choose Option</option>
<option v-for="option in options" v-bind:value="option.id">
{{option.name}}
</option>
</select>
<div v-if="options[0].id === 1">
HELLO
</div>
</div>
</div>
</template>
每次我在选项之间切换,或者当应用程序第一次加载时,"HELLO“值保持不变。
我做错了什么?我怎样才能改变这一点?如果有人能帮我的话会很感激的。谢谢!
发布于 2018-08-18 03:50:27
您的select
输入绑定到selected
变量,options
不会改变。你是说v-if="selected === 1"
吗?
https://stackoverflow.com/questions/51901938
复制相似问题