如何使用 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，因此是should be avoided。

如果你改变 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>