使用 Vuejs 级联下拉列表

Question

我正在尝试使用 vue.js 创建级联下拉菜单。我想根据从第一个下拉列表中选择的项目在第二个下拉列表中设置数据。我不知道如何根据所选项目过滤数据。我尝试使用计算属性但没有成功。我需要一些帮助。提前致谢。

<template>
  <b-container class="my-2">
    <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])
        }
      }
    }

Answer 1

一个观察： 您正在更新第一个下拉列表 select 上的源数组 this.currencyArray。因此，级联下拉列表将不包含过滤后的数据。

工作演示：

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 class="cascading-dropdown">
    <div class="dropdown">
      <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 class="dropdown">
      <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>

注意： 我创建此代码段是为了向您展示它如何根据您的要求工作。需要的话可以根据需要修改。

使用 Vuejs 级联下拉列表

Cascading dropdown using Vuejs

html

javascript

vue.js

nuxt.js