对象中的 vue.js 循环选项值
Posted
技术标签:
【中文标题】对象中的 vue.js 循环选项值【英文标题】:vue.js loop option value in object 【发布时间】:2020-06-02 07:58:22 【问题描述】:我有这样的对象;
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 时一样。 如果你知道如何解决这个问题,请帮助我。 谢谢。
【问题讨论】:
这可能对你有帮助:***.com/questions/50982408/… 【参考方案1】:为您的解决方案使用这个 -
<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>
我希望它会有所帮助!
【讨论】:
【参考方案2】:将 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
【讨论】:
嗨,亲爱的,谢谢你,我知道了。你太有帮助了以上是关于对象中的 vue.js 循环选项值的主要内容,如果未能解决你的问题,请参考以下文章
如何在选项/选择标签循环之外的按钮中使用 Vue.js 中下拉列表的选定 ID
(Vue.js)如何使用数据中数值数组中的选项标记填充选择标记?