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>

这是我的第二个下拉列表（下拉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/

Answer 2

定义一个computed property，它根据dbColumn的值（Drop Down 1的绑定数据）返回Drop Down 2中您想要的内容。然后让数据绑定到其余部分。

Answer 3

我认为您最好在HTML中编辑<options>。

<select v-model="mySelection">
  <option v-for="o in options" :value="o.value">{{o.text}}</option>
</select>

这是一个JSFiddle：https://jsfiddle.net/gurghet/p8qtuvtd/

使用Vue.JS基于Drop Down 1填充Dropdown 2

3 个答案: