Vue.js dependent select

Question

I'm in very beginning stage learning Vue.js and encountered problem I can't figure out right now. So I have 1 select field:

data: {
  list: {
    'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ]
  }
}

Then I populating first select field like this:

<select v-model="firstOptions" v-on:change="onChange">
  <option v-for="(item, index) in list">{{ index }}</option>
</select>

At this point everything is fine, but how to populate another select field based on first select? I need to access size and price.

I'm think this should be done here:

methods: {
  onChange: function() {
   // get options for second select field
  }
}

you can predefine a dependantSelectArray. On the onChange method you can fill it with select datas. So you can v-for on that dependantSelectArray and its sub values. And also you can set the model as depentandOptions['key-for-your-select']. — cenk ebret
– cenk ebret, Commented Feb 26, 2017 at 15:40
Yes I do understand this logic, but I don't understand how to code it. For excample console.log( this.list ) brings me whole list, but I can't get specific selected item from that list. — RomkaLTU
– RomkaLTU, Commented Feb 26, 2017 at 15:48
you named it firstOptions. It might be changing when you select another value. In onChange menu you can console.log(app.firstOptions) — cenk ebret
– cenk ebret, Commented Feb 26, 2017 at 16:17
Yes, just made typo. If I console.log it it will give me object with whole list. — RomkaLTU
– RomkaLTU, Commented Feb 26, 2017 at 16:20

Bert · Accepted Answer · 2017-02-26 18:50:40Z

14

I'm assuming here in your data structure, list, that the value of each property defines the options you will use in the second select. The key here is the model for the first select drives the options for the second.

<option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>

I'm not sure how exactly you want your text and values laid out in the first or second selects, but here is an example.

new Vue({
  el:"#app",
  data: {
    firstOption: null,
    secondOption: null,
    list: {
      'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ],
      'Option 2': [{size:'3', prize:'8'}]
    }
  }
})

and in your template

<div id="app">
  <select v-model="firstOption">
    <option v-for="(item, index) in list">{{ index }}</option>
  </select>
  <select v-model="secondOption" v-if="firstOption">
    <option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>
  </select>
</div>

Example in codepen.

answered Feb 26, 2017 at 18:50

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

1 Comment

RomkaLTU Over a year ago

Yes, more clear now thanks. I already implemented this in little diferent way, changed jSON structure and doing onclick event v-on:click="onclick(firstListItemObj)" then in method onclick I can access firstListItemObj and return this.secondListItemObj = firstListItemObj.options Yeah ant I changed select to ul, so here I doing onClick not onChange.

Collectives™ on Stack Overflow

Vue.js dependent select

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related