javascript - 如何在 Vuejs 中创建动态的两个关系下拉列表

Question

我是 vue.js 的新手.我一直在尝试根据另一个选择中的选定值动态设置一个选择的选项。

例如，我有两个下拉列表，分别命名为 division 和 district。

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

如果A的值为1，那么选区应该加载相关的代码。我可以用 jQuery 来做，但不能用 Vue。

这是我的模板。

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

这是我的 javascript。

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

当 div_code 值为 1 时，如何从 ajax 加载带有相关数据的 dist_code select？

Answer 1

处理 div_code 更改的更改事件

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

然后将 onDivCodeChange 方法添加到您的 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)
    })
  }
}

当然，添加 code_list 作为数据的属性并更新模板。

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