CODEWITHSUNDEEP
vue.js
CodeMascot
CodeMascot

Reputation: 855

Populate Drop Down 2 based on Drop Down 1 with Vue.JS

Here is my first dropdown (Drop Down 1) code-

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

Here is my second dropdown (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>

Here is my app.js code-

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

Now I need to populate the second drop down (Drop Down 2) based on the selection of first dropdown (Drop Down 1). So I thought I should populate it from data object. So I took a json object name filter and here I've defined some values as column and value. Now I need to populate the second drop down with value from the value array from filter object by cross matching dbColumn and column. Hope I've made you guys understand my problem. Thanks in advance.

Upvotes: 2

Views: 5870

Answers (3)

Erik
Erik

Reputation: 219

Here is an example using 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
    }
  }
})

See JSFiddle: https://jsfiddle.net/erik127/p656ke3v/2/

Upvotes: 2

PatrickSteele
PatrickSteele

Reputation: 14677

Define a computed property which returns the content of whatever you want in Drop Down 2 -- based on the value of dbColumn (the bound data of Drop Down 1). Then let data binding to the rest.

Upvotes: 1

gurghet
gurghet

Reputation: 7707

I think you are better off editing the <options> inside the HTML.

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

Here is a JSFiddle: https://jsfiddle.net/gurghet/p8qtuvtd/

Upvotes: 0

Related Questions