Question

56

Vue.js dependent select

rated 0 times [ 58] [ 2] / answers: 1 / hits: 18107 / 7 Years ago, sun, february 26, 2017, 12:00:00

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

  }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emiliano

Add To Favorites

Follow

Total Points: 381

Total Questions: 109

Total Answers: 93

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

emiliano questions

1 Jest: Share Variables Between Test Files

Tue, Sep 1, 20, 00:00, 4 Years ago

1 Promise.all not working with an array of async functions

Sun, Jul 26, 20, 00:00, 4 Years ago

1 Discord.js: Fetch message from ALL channels

Fri, Jun 12, 20, 00:00, 4 Years ago

1 How to spoof a closed google form (...no longer accepting responses)? I want to submit a form after deadline

Thu, Jun 4, 20, 00:00, 4 Years ago

1 concurrently command not found but installed gloabally

Sat, Apr 25, 20, 00:00, 4 Years ago

View All

answered 7 Years ago lara · Accepted Answer

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.