vue.js - 使用 Vue.JS 基于下拉列表 1 填充下拉列表 2

Question

这是我的第一个下拉(Drop Down 1)代码-

<div class="col-md-3">
    <select name="t_col" v-model="dbColumn" class="form-control" v-on:change="columnChange(dbColumn)">
        <option value="source_country" selected>Source Country</option>
        <option value="destination_country">Destination Country</option>
        <option value="import_log">Import Log</option>
        <option value="shipment_date">Shipment Date</option>
        <option value="commodity_code">Commodity Code</option>
        <option value="customs_code">Customs Code</option>
        <option value="supply_quantity">Supply Quantity</option>
        <option value="net_mass">Net Mass</option>
        <option value="gross_mass">Gross Mass</option>
        <option value="value">Value</option>
        <option value="total_taxes">Total Taxes</option>
    </select>
</div>

这是我的第二个下拉菜单(Drop Down 2)-

<div class="col-md-3">
    <select name="t_rel" class="form-control t_rel" v-model="filter">
        <option value="equal" selected>=</option>
    </select>
</div>

这是我的 app.js代码-

new Vue({
    el:'#query_wrapper',
    data:{
        rows: [
            {}
        ],
        filter: [
            { 
                column:"source_country", 
                value:[{ value:"equal", text:"="}]
            },
            { 
                column:"destination_country", 
                value:[{ value:"equal", text:"="}]
            },
            { 
                column:"import_log", 
                value:[{ value:"equal", text:"="}]
            }
        ],
        dbColumn:{}
    },
    methods:{
        addRow: function () {
            try {
                this.rows.push({});
            } catch(e)
            {
                console.log(e);
            }
        },
        removeRow: function (row) {
            this.rows.$remove(row);
        },
        columnChange: function (dbColumn) {
            console.log(dbColumn);
        }
    }
});

现在我需要根据第一个下拉列表 (Drop Down 1) 的选择来填充第二个下拉列表 (Drop Down 2)。所以我想我应该从数据对象中填充它。所以我取了一个json对象名filter在这里我将一些值定义为 column和 value .现在我需要用 value 中的值填充第二个下拉列表来自 filter 的数组通过交叉匹配对象 dbColumn和 column .希望我让你们明白我的问题。提前致谢。

Answer 1

这是一个使用 v-for 的例子:

<div id="app">
  <select v-model="selectbox1">
    <option value="food">Food</option>
    <option value="drink">Drink</option>
    <option value="desert">Desert</option>
  </select>
  <select v-model="selectbox2">
    <option v-for="option in setOptions" v-bind:value="option.val">{{option.text}}</option>
  </select>
  <br><br>
  <span>selected: {{selectbox1}} {{selectbox2}}</span>
</div>


new Vue({
  el:'#app',
  data:{
    selectbox1: undefined,
    selectbox2: undefined,
  },
  computed: {
    setOptions: function(){
      if (this.selectbox1 === 'food'){
         var options = [{val: 'pizza', text: 'Pizza'},
                        {val: 'lasagna', text: 'Lasagna'},
                        {val: 'salad', text: 'Salad'}]
      } else if (this.selectbox1 === 'drink'){
         var options = [{val: 'beer', text: 'Beer'},
                        {val: 'wine', text: 'Wine'},
                        {val: 'coke', text: 'Coke'},
                        {val: 'water', text: 'Water'}]
      } else if (this.selectbox1 === 'desert'){
         var options = [{val: 'tiramisu', text: 'Tiramisu'},
                        {val: 'icecream', text: 'Icecream'},
                        {val: 'espresso', text: 'Espresso'}]
      }
      return options
    }
  }
})

参见 JSFiddle:https://jsfiddle.net/erik127/p656ke3v/2/