How to create dynamic two relational dropdown in Vuejs

Question

I am new to vue.js. I'm stuck trying to dynamically set the options of one select based on the selected value in another.

For example, I have two dropdowns named division and district.

var A = [{1: 'a'},{2:'b'}];

If value of A is 1, then the district select should load the related codes. I can do it with jQuery but not with Vue.

Here is my template.

<div class="form-group" :class="class_obj">
  <select name="div_code" v-model="div_code" class="form-control" required>
    <option value="">Choose One</option>
    <option v-for="option in div_list" v-bind:value="option.value">
      {{ option.text }}
     </option>
   </select>
  </div>

  <div class="form-group" :class="class_label">
    <label for="">District</label>
   </div>
   <div class="form-group" :class="class_obj">
     <select name="dist_code" v-model="dist_code" class="form-control" required>
       <option value="">Choose One</option>
     </select>
    </div>

Here is my javascript.

export default {
   data():{
     div_list: [
       {'1': "ABC"} , {'2': "DEF"}
     ];
   }
}

How can I load the dist_code select with related data from ajax when div_code value is 1?

Bert · Accepted Answer · 2017-07-13 20:09:40Z

3

Handle a change event on the div_code change

<select name="div_code" 
        v-model="div_code" 
        @change="onDivCodeChange"
        class="form-control" 
        required>
  <option value="">Choose One</option>
  <option v-for="option in div_list" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

And add the onDivCodeChange method to your Vue.

methods:{
  onCodeChange(){
    // make an ajax call and set the options for your
    // dist_code here. For example:
    $.ajax({
      url: "...",
      data: {div_code: this.div_code},
      success: codes => this.code_list = codes
      error: err => console.log(err)
    })
  }
}

And of course add code_list as a property of your data and update your template.

<select name="dist_code" v-model="dist_code" class="form-control" required>
  <option value="">Choose One</option>
  <option v-for="code in code_list" :value="code.value">{{code.text}}</option>
</select>

answered Jul 13, 2017 at 20:09

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

5 Comments

serkan Over a year ago

well, this explains better than my answer :)

Bert Over a year ago

@serkandemirel0420 Its all good :) If all the options were already available, a computed property would be a good choice.

alien Over a year ago

Which ajax method you prefered in vue.js jQuery axax or vue-resource? I having trouble using vue-resource. Sometimes respone json return string and sometimes return array

Bert Over a year ago

@alien personally I prefer axios. But really, any of them is perfectly fine.

alien Over a year ago

Thanks for your feedback

tony19 · Accepted Answer · 2022-07-15 05:30:07Z

Create computed property. Basically, when data property changes(should be used in computed property) the computed property will update itself.

As in below example, when message property changes the reverseMessage will update itself.

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

1- In your example, bind your first dropdown value to a data property.

2 -Create a computed property for the second dropdown and use the data property in it.

3 -Write the template of it.

Done.

When the first dropdown changes the second dropdown will update itself.

Note: Vue documentation advise to use Watcher for Ajax requests instead of computed properties. Both are very similar.

https://v2.vuejs.org/v2/guide/computed.html#Watchers

Collectives™ on Stack Overflow

How to create dynamic two relational dropdown in Vuejs

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related