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

【问题标题】：Populate Drop Down 2 based on Drop Down 1 with Vue.JS使用 Vue.JS 基于 Drop Down 1 填充 Drop Down 2
【发布时间】：2017-01-01 11:09:53
【问题描述】：

这是我的第一个下拉（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。现在我需要通过交叉匹配dbColumn 和column 来填充来自filter 对象的value 数组的值的第二个下拉列表。希望我让你们理解我的问题。提前致谢。

【问题讨论】：

标签： vue.js

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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/

【讨论】：

感谢您的回复。但是您的代码不起作用。只需转到jsfiddle 链接。
prntscr.com/ca5kx6 只需转到链接。我添加了一个屏幕截图。
这其实很奇怪，控制台说了什么？