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

Question

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

Answer 1

尝试将整个对象绑定到您的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>