如何使用Vue.js设置两个依赖项下拉列表

Question

我使用Vue.js在下拉列表中创建它运行良好，但我需要添加另一个类似的列表，如何设置它，在这里我添加了两个代码我的第一个代码

var addUserVue = new Vue({
el: "#app",
data: {
heading: "Vue Select Cascade",
brand: null,
model: null,
brands_options: [
{ text: "Honda",id: 'Honda' },
{ text: "Toyota",id: 'Toyota' },
{ text: "Nissan",id: 'Nissan' },
{ text: "Suzuki",id: 'Suzuki' }
],
model_options: {
'Honda': [
{ text: "Accord", id: 'Accord' },
{ text: "Civic",  id: 'Civic' }
],
'Toyota': [
{ text: "Corolla", id: 'Corolla' },
{ text: "HiAce",  id: 'HiAce' }
],
'Nissan': [
{ text: "Altima", id: 'Altima' },
{ text: "Zuke",   id: 'Zuke' }
],
'Suzuki': [
{ text: "Alto",   id: 'Alto' },
{ text: "Swift",  id: 'Suzuki' }
]
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
					<div class="col-xs-6" id="app">
						<div class="form-group">
							<label for="brand">Brand</label>
							<select class="form-control" name="brand" id="brand" v-model="brand">
							<option :value="null" disabled selected>Select Brand</option>
							<option v-for="option in brands_options" v-bind:value="option.id" >{{ option.text}}</option>
							</select>
						</div>
						<div class="form-group">
							<label for="model">Model</label>
							<select class="form-control" name="model" id="model" v-model="model">
							<option :value="null" disabled selected>Select Model</option>
							<option v-for="option in model_options[brand]" v-bind:value="option.id" v-bind:key="option.id">{{option.text}}</option>
							</select>
						</div>
					</div>

这段代码运行得很好，但当我添加js文件时，这个页面无法加载，我认为第二个js文件有问题，请帮助我解决

此处的第二个代码

var location = new Vue({
el: "#location",
data: {
heading: "Vue Select Cascade",
District: null,
City: null,
Districts_options: [
{ text: "Rathnapura",id: 'Rathnapura' },
{ text: "Kegalle",id: 'Kegalle' },
{ text: "Colombo",id: 'Colombo' },
{ text: "Gampaha",id: 'Gampaha' }
],
City_options: {
'Rathnapura': [
{ text: "Eheliyagoda", id: 'Eheliyagoda' },
{ text: "Kuruwita",  id: 'Kuruwita' }
],
'Kegalle': [
{ text: "Mawanella", id: 'Mawanella' },
{ text: "Kegalle",  id: 'Kegalle' }
],
'Colombo': [
{ text: "Awissawella", id: 'Awissawella' },
{ text: "Homagama",   id: 'Homagama' }
],
'Gampaha': [
{ text: "Gampaha",   id: 'Gampaha' },
{ text: "Minuwangoda",  id: 'Minuwangoda' }
]
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="col-xs-6" id="location">
						<div class="form-group">
							<label for="District">Select District</label>
							<select class="form-control" name="District" id="District" v-model="District">
							<option :value="null" disabled selected>Select District</option>
							<option v-for="option in Districts_options" v-bind:value="option.id" >{{ option.text}}</option>
							</select>
						</div>
						<div class="form-group">
							<label for="City">City</label>
							<select class="form-control" name="City" id="City" v-model="City">
							<option :value="null" disabled selected>Select City</option>
							<option v-for="option in City_options[District]" v-bind:value="option.id" v-bind:key="option.id">{{option.text}}</option>
							</select>
						</div>
					</div>

Answer 1

location指的是窗口属性window.location，因此应避免使用。

如果你改变var location = new Vue({其他东西，

例如var l = new Vue({，您的代码有效。

var l = new Vue({
el: "#location",
data: {
heading: "Vue Select Cascade",
District: null,
City: null,
Districts_options: [
{ text: "Rathnapura",id: 'Rathnapura' },
{ text: "Kegalle",id: 'Kegalle' },
{ text: "Colombo",id: 'Colombo' },
{ text: "Gampaha",id: 'Gampaha' }
],
City_options: {
'Rathnapura': [
{ text: "Eheliyagoda", id: 'Eheliyagoda' },
{ text: "Kuruwita",  id: 'Kuruwita' }
],
'Kegalle': [
{ text: "Mawanella", id: 'Mawanella' },
{ text: "Kegalle",  id: 'Kegalle' }
],
'Colombo': [
{ text: "Awissawella", id: 'Awissawella' },
{ text: "Homagama",   id: 'Homagama' }
],
'Gampaha': [
{ text: "Gampaha",   id: 'Gampaha' },
{ text: "Minuwangoda",  id: 'Minuwangoda' }
]
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="col-xs-6" id="location">
						<div class="form-group">
							<label for="District">Select District</label>
							<select class="form-control" name="District" id="District" v-model="District">
							<option :value="null" disabled selected>Select District</option>
							<option v-for="option in Districts_options" v-bind:value="option.id" >{{ option.text}}</option>
							</select>
						</div>
						<div class="form-group">
							<label for="City">City</label>
							<select class="form-control" name="City" id="City" v-model="City">
							<option :value="null" disabled selected>Select City</option>
							<option v-for="option in City_options[District]" v-bind:value="option.id" v-bind:key="option.id">{{option.text}}</option>
							</select>
						</div>
					</div>