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选择？

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>

Answer 2

创建计算属性。基本上，当数据属性发生更改时（应在计算属性中使用），计算属性将自行更新。

如下例所示，当message属性更改时，reverseMessage将自行更新。

<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-在您的示例中，将您的第一个下拉列值绑定到数据属性。

2 - 为第二个下拉列表创建一个计算属性并使用该数据它的财产。

3 - 写下它的模板。

完成。

当第一个下拉列表更改时，第二个下拉列表将自行更新。

注意：Vue文档建议使用Watcher来获取Ajax请求而不是计算属性。两者非常相似。

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

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

2 个答案: