填充下拉2基于下拉1 Vue.JS

这是我的第一下拉（下拉1）代码 -填充下拉2基于下拉1 Vue.JS

<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); 
     } 
    } 
});

现在我需要的基础上选择填充第二个下拉（下拉2）第一个下拉菜单（Drop Down 1）。所以我想我应该从数据对象中填充它。所以我拿了一个json对象名称filter，在这里我定义了一些值为column和value。现在我需要通过交叉匹配dbColumn和column来填充value数组中filter对象的第二个下拉列表。希望我让你们明白我的问题。提前致谢。

来源

2016-08-25 the_dramatist

我认为你最好在编辑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/

来源

2016-08-25 08:20:28 gurghet

感谢您的答复。但是你的代码不起作用。只需转到'jsfiddle'链接。 –

在Chrome上工作 – gurghet

http://prntscr.com/ca5kx6只需转到链接。我添加了一个截图。 –

定义一个computed property返回无论你想在下拉2的内容 - 基于对dbColumn值（下拉1的数据绑定）。然后让数据绑定到其余部分。

来源

2016-08-25 13:28:15 PatrickSteele

下面是使用v型中的示例：

<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/

来源

2017-06-01 11:07:26 Erik

填充下拉2基于下拉1 Vue.JS

回答

相关问题