[Vuejs]-Getting item properties from a dropdown in Vue.Js

by

3👍

✅

Try to bind the whole object to your option element as follows :

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

by this way you could access its properties like :

  <span>Selected: {{ selected.value }}</span>
  <p>The SKU of your selected item is {{ selected.sku }}</p>

Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected 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>
👤Boussadjra Brahim

Leave a comment