[Vuejs]-Making one b-form-select dependent on value from other b-form-select

by

0👍

you can try:

new Vue({
  el: "#app",
  
  data() {
    return {
      items: [
        {
            state: 'A',
            district: ['D1','D2','D3']
        },
        {
            state: 'B',
            district: ['D4','D5','D6']
        }
      ],
      form: {
        state: '',
        district: ''
      }
    }
  },
  
  computed: {
    stateOptions() {
      return this.items.map(item => item.state)
    },
    districtOptions() {
      return this.form.state ? this.items.find(item => item.state === this.form.state).district : []
    }
  },
  
  methods: {
    resetDistrict(option) {
      if (option !== this.form.state) {
        this.form.district = ''
      }
    }
  }
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="app">
  <div>
    <b-form-select id="state" v-model="form.state" :options="stateOptions" @change="resetDistrict()">
    </b-form-select>
  </div>
  <div>
    <b-form-select id="district" v-model="form.district" :options="districtOptions">
    </b-form-select>
  </div>
  <pre>{{ form }}</pre>
</div>

Leave a comment