[Vuejs]-How to setup two dependency dropdown list using Vue.js

by

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>

Leave a comment