Получение свойств элемента из выпадающего списка в 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>