![](/img/trans.png)
[英]Vue.js doesn't update value if I use an object in another object for select option
[英]vue.js loop option value in object
我有这样的对象;
fluit:[
{id:'001', name:"Apple"},
{id:'002', name:"Banana"},
{id:'003', name:"Mango"},
{id:'004', name:"orange"},
{id:'005', name:"papaya"},
]
和 vuejs 这样的代码
<select >
<option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select"{{item.name</option>
</select>
我从这个标签中得到的是这样的
我想问的是如何获得作为每个选项的 id 的值。 就像当我选择Mango并且值为003 时。 如果你知道如何解决这个问题,请帮助我。 谢谢你。
对于您的解决方案,请使用此 -
<template>
<select name="itemType" v-model="itemType" @change="onChange()" class="form-control">
<option value="001">Apple</option>
<option value="002">Banana</option>
</select>
</template>
<script>
export default {
data() {
return {
itemType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.itemType)
}
}
}
</script>
我的建议是使用 vuetify (v-select) 组件和 vue 以获得更好的性能。
<template>
<v-select
v-model="select"
:items="fluit"
item-text="id"
item-value="name"
label="Select"
@input="doSomething"
return-object/>
</template>
<script>
export default {
data () {
return {
select: { id:'005', name:"papaya" },
items: [
{id:'001', name:"Apple"},
{id:'002', name:"Banana"},
{id:'003', name:"Mango"},
{id:'004', name:"orange"},
{id:'005', name:"papaya"},
],
}
method:{
doSomething(){
console.log(this.select)
}
}
},
}
</script>
我希望它会有所帮助!
将 v-model 添加到您的选择中,就是这样:
<select v-model="selectedItem">
<option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select">
{{item.name}}
</option>
</select>
现在 selectedItem 将包含水果的值,工作示例: https : //codesandbox.io/s/fruit-select-vs709
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.