0👍
✅
location
refers to the window property window.location
and therefore should be avoided.
If you change
var location = new Vue({
to something else,
e.g. 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>
Source:stackexchange.com