Getting item properties from a dropdown in Vue.Js

Question

I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.

How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?

<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' }
    ]
}
})

Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box. — Gracie
– Gracie, Commented Jan 2, 2019 at 12:07
i edited my answer by adding some details that fit to your use case — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 2, 2019 at 12:25

Abdelillah Aissani · Accepted Answer · 2019-01-02 19:21:18Z

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>

edited Jan 2, 2019 at 19:21

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

answered Jan 2, 2019 at 12:07

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Frank Over a year ago

You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7

Gracie Over a year ago

This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...

Boussadjra Brahim Over a year ago

you should give a default value for products property like products:'A'

Collectives™ on Stack Overflow

Getting item properties from a dropdown in Vue.Js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related