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
  }
}

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
  }
}

• javascript
• vuejs2
• vue.js

• 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 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 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 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 Commented Feb 26, 2017 at 16:20

1 Answer 1

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.