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

Question

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

例如，我有两个名为分区和地区的下拉列表。

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"}
];
}
}

当值为 1 时div_code如何使用 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

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

如以下示例所示，当消息属性更改时，反向消息将自行更新。

<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 文档建议对 Ajax 请求使用 Watcher 而不是计算属性。两者非常相似。

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