как настроить раскрывающийся список с двумя зависимостями, используя 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>