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

Question

I create on dropdown list using Vue.js its running well, but i need to add another list like that, how to setup that, here I add both codes my first code

 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>

this code is running well, but this page is fail to load when I add js file, I think trouble in the second js file, help me to solve that

second code here

 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 refers to the window property window.location and therefore should be avoided .

If you change var location = new Vue({ to something else,

eg var l = new Vue({ , your code works.

 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>