I'm trying to create a cascading dropdown using vue.js. I want to set the data on the second dropdown based on the item chosen from the first dropdown. I don't know how to filter the data based on the chosen item. I've tried to use computed property but didn't succeed. I need some help please. Thanks in advance.

<template>
  <b-container >
    <b-row>
      <b-col col="12" md="6" lg="3">
        <b-form-group id="fieldset" :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-first" label-size="lg">
              <v-select
                id="assetPair"
                @click="changeAssetClass(assetPair)"
                v-model="assetPair"
                :searchable="true"
                :options="assetSymbols"
              />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="6" lg="3">
            <b-form-group id="fieldset-1"               :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-pair" label-size="lg">
              <v-select id="symbolsPair" v-model="symbolsPair" :searchable="true" :options="currencyArray" />
            </b-form-group>
      </b-col>
    </b-row>
  </b-container>
</template>

export default {
      data() {
        assetPair: 'Forex',
        symbolsPair: '',
        currencyArray: [],
        assetsSymbols: [{
            text: 'Forex',
            id: 1
          },
          {
            text: 'Metal',
            id: 2
          },
          {
            text: 'Indices',
            id: 3
          },
        ],
        symbolsPair: {
          1: [{
              text: 'AUDCAD',
              id: 1,
            },
            {
              text: 'AUDCHF',
              id: 2,
            },
            {
              text: 'AUDJPY',
              id: 3,
            },
          ],
          2: [{
              text: 'XAUUSD',
              id: 1,
            },
            {
              text: 'XAGUSD',
              id: 2,
            },
          ],
          3: [{
              text: 'GER30Cash',
              id: 1,
            },
            {
              text: 'US30Cash',
              id: 2,
            },
            {
              text: 'EU50Cash',
              id: 3,
            },
          ],
        }
      },
      computed() {
        changeAssetClass(e) {
          return this.currencyArray.push(this.symbolsPair[e])
        }
      }
    }

CodePudding user response：

One observation : You are updating the source array this.currencyArray on first dropdown select. Hence, the cascading dropdown will not contain the filtered data.

Working Demo :

new Vue({
    el: '#app',
    data: function() {
        return {
            assetsSymbols: [{
                text: 'Forex',
                id: 1
            }, {
              text: 'Metal',
              id: 2
            }, {
              text: 'Indices',
              id: 3
              }
            ],
            selectedSymbol: '',
            selectedSymbolPair: '',
            symbolsPairArr: [],
            symbolsPair: {
          1: [{
              text: 'AUDCAD',
              id: 1,
            },
            {
              text: 'AUDCHF',
              id: 2,
            },
            {
              text: 'AUDJPY',
              id: 3,
            },
          ],
          2: [{
              text: 'XAUUSD',
              id: 1,
            },
            {
              text: 'XAGUSD',
              id: 2,
            },
          ],
          3: [{
              text: 'GER30Cash',
              id: 1,
            },
            {
              text: 'US30Cash',
              id: 2,
            },
            {
              text: 'EU50Cash',
              id: 3,
            },
          ]}
        }
    },
    watch: {
        selectedSymbol: function() {
          this.symbolsPairArr = [];
          if (this.selectedSymbol > 0) {
            this.symbolsPairArr = this.symbolsPair[this.selectedSymbol];
          }
        }
    },
    mounted() {
      this.selectedSymbol = 2;
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div >
    <div >
      <span>Symbol :</span>
      <select v-model="selectedSymbol">
        <option value="">Select a Symbol</option>
        <option v-for="symbol in assetsSymbols" :value="symbol.id" :key="symbol.id">{{ symbol.text }}</option>
      </select>
    </div>
    <div >
      <span>Symbol Pair:</span>
      <select :disabled="!selectedSymbol" v-model="selectedSymbolPair">
        <option value="">Select a Pair</option>
        <option v-for="pair in symbolsPairArr" :value="pair.id" :key="pair.id">{{ pair.text }}</option>
      </select>
    </div>
  </div>
</div>

Note : I created this snippet to demonstrate you how it will work as per your requirement. You can modify it as per the need if required.