Javascript 从Vue.Js中的下拉列表中获取项目属性

Javascript 从Vue.Js中的下拉列表中获取项目属性,javascript,html,vue.js,vuejs2,vue-component,Javascript,Html,Vue.js,Vuejs2,Vue Component,我正在努力从下拉框中选择的项目中输出一个对象属性(SKU)。我尝试了一些变体,但没有成功 如果我没有在下拉列表中显示某个对象属性(使用表达式),如何访问该属性。本质上,如何在下拉列表之外显示项目的SKU <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </se

我正在努力从下拉框中选择的项目中输出一个对象属性(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' }
    ]
}
})

{{option.text}
已选定:{{Selected}
所选项目的SKU为{{selected.SKU}

新Vue({ el:“…”, 数据:{ 选定:“A”, 选项:[ {text:'One',value:'A',sku:'TT5'}, {文本:'Two',值:'B',sku:'BB8'}, {文本:'Three',值:'C',sku:'AA9'} ] } })
尝试将整个对象绑定到
选项
元素,如下所示:

<option v-for="option in options" v-bind:value="option">

{{option.text}

已选定:{{Selected} 所选项目的SKU为{{selected.SKU}


尝试将整个对象绑定到
选项
元素,如下所示:

<option v-for="option in options" v-bind:value="option">

{{option.text}

已选定:{{Selected} 所选项目的SKU为{{selected.SKU}


是否要显示
sku
属性,但无法显示?是的,我需要在下拉列表中向客户显示文本属性,并在范围中显示摘要。另外,在v-bind中保留“option.value”,这样就可以将其传递到我的后端。但我也希望在选择框外的段落中向客户显示SKU。这些值是唯一的?我通过添加一些适合您的用例的详细信息编辑了我的答案是否要显示
SKU
属性而不能?是的,我需要在下拉列表中向客户显示文本属性,并在范围中显示摘要。另外,在v-bind中保留“option.value”,这样就可以将其传递到我的后端。但我也希望在选择框外的段落中向客户显示SKU。值是唯一的?我通过添加一些适合您的用例的详细信息编辑了我的答案您比我快:)我正在使用相同的解决方案制作小提琴:这看起来不错,我正试图将这段代码改编成我的个人项目,结果它崩溃了。你能帮我把这把小提琴调好吗?在保留v-bind:value=“item.id”的同时-只要我尝试访问任何对象属性(lastprice.sku),它就会中断…您应该为
产品
属性提供默认值,例如
产品:'a'
您比我快:)我正在使用相同的解决方案制作小提琴:看起来不错,我正试图将这段代码改编成我的个人项目,结果它崩溃了。你能帮我把这把小提琴调好吗?在保留v-bind:value=“item.id”的同时-只要我尝试访问任何对象属性(lastprice.sku),它就会中断…您应该为
产品
属性(如
产品:'a'