title: How to create dynamic two relational dropdown in Vuejs
body: <p>I am new to <a href="/questions/tagged/vue.js" class="post-tag" title="show questions tagged &#39;vue.js&#39;" rel="tag">vue.js</a>. I'm stuck trying to dynamically set the options of one select based on the selected value in another.</p>
  
  <p>For example, I have two dropdowns named division and district. </p>
  
  <pre><code>var A = [{1: 'a'},{2:'b'}];
  </code></pre>
  
  <p>If value of A is 1, then the district select should load the related codes. I can do it with <code>jQuery</code> but not with Vue.</p>
  
  <p>Here is my template.</p>
  
  <pre><code>&lt;div class="form-group" :class="class_obj"&gt;
    &lt;select name="div_code" v-model="div_code" class="form-control" required&gt;
      &lt;option value=""&gt;Choose One&lt;/option&gt;
      &lt;option v-for="option in div_list" v-bind:value="option.value"&gt;
        {{ option.text }}
       &lt;/option&gt;
     &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group" :class="class_label"&gt;
      &lt;label for=""&gt;District&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="form-group" :class="class_obj"&gt;
       &lt;select name="dist_code" v-model="dist_code" class="form-control" required&gt;
         &lt;option value=""&gt;Choose One&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my javascript.</p>
  
  <pre><code>export default {
     data():{
       div_list: [
         {'1': "ABC"} , {'2': "DEF"}
       ];
     }
  }
  </code></pre>
  
  <p>How can I load the dist_code select with related data from ajax when div_code value is 1?</p>