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

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.