我正在努力从下拉框中选择的项目中输出对象属性 (SKU) 之一。我尝试了一些变体但没有成功。
如果我不在下拉列表中显示对象属性之一(使用表达式),如何访问它。本质上,如何在下拉列表之外显示商品的 SKU?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})
最佳答案
尝试将整个对象绑定(bind)到您的 option
元素,如下所示:
<option v-for="option in options" v-bind:value="option">
通过这种方式,您可以访问其属性,例如:
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
由于您需要将 value 属性传递到后端,因此您可以使用计算属性来根据所选值获取所选对象:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>
关于javascript - 从 Vue.Js 中的下拉列表中获取项目属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54005284/