vuejs checkbox need to change method

Vzupo 0
Viewed 35

I have a dropdown menu that triggers a method to get data based on what is selected in the dropdown. I would like to add a condition that changes the @change method if a checkbox is selected. The method would switch based on which checkbox is selected. I guess a v-if that runs a check somewhere--Im not sure.

new Vue({
  el: "#app",
  data: {
   selection: 'Select a option',
   todos: [{
    name: 'apple'
   }, {
    name: 'oranges'
   }, {
    name: 'carrots'
   }]
  },
  methods:{
        changeP (event) {
  
      this.getSetA();


       //  alert("this is set a");
      
    },
    
    changeP1 (event) {
  
      this.getSetB();

  alert("this is set b");
       
      
    },
    
    changeP2 (event) {
  
      this.getSetC();
      alert("this is set c");


       
      
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Fruit:</h2>
   
  <select v-model="selection" @change="changeP($event)">
    <option value="Select a option" disabled>Choose an fruit:</option>
    <option v-for="(t, i) in todos" :key="i" :value="t.name">{{ t.name }}</option>
  </select>
  <br>
   <input type="checkbox" id="vehicle1" name="vehicle1" value="apple"> Apples
<input type="checkbox" id="vehicle2" name="vehicle2" value=""> Oranges
<input type="checkbox" id="vehicle3" name="vehicle3" value="">pears
</div>

vue.js
1 Answers

new Vue({
  el: '#app',
  data: {
    selection: 'Select an option',
    selectOptions: [ { name: 'apple' }, { name: 'oranges' }, { name: 'carrots' }],
    checkboxOptions: [ 'vehicle1', 'vehicle2', 'vehicle3' ],
    checkedItems: [],
    message: '',
  },
  methods: {
    onDropdownChange() {
      this.message = '';
      if (this.checkedItems.length) {
        this.message = `You've selected: `;
        for(let i = 0; i < this.checkedItems.length; i++) {
          this.message += this.checkedItems[i] + ' ';
        }
      }
      
      switch(this.selection) {
        case 'apple':
          return this.onAppleSelected();
        case 'oranges':
          return this.onOrangesSelected();
        default:
          return this.onCarrotsSelected();
       }
    },
    onAppleSelected() {
      if (this.message.length) {
        this.message += 'and apple.';
        return;
      }
      this.message = `You've selected apple`;
    },
    onCarrotsSelected() {
      this.message += ' CARROT!'
    },
    onOrangesSelected() {
      this.message += ' No Scurvy';
    }
  },
  template: `
    <div id="app">
     <h2>Fruit:</h2>
     
     <select v-model="selection" @change="onDropdownChange">
       <option value="Select an option">Choose</option>
       <option v-for="(o, i) in selectOptions" :key="o.name" :value="o.name">{{o.name}}</option>
     </select>
     
     <div style="display:block" v-for="(o, i) in checkboxOptions" :key="o">
       <label :for="o">{{o}}</label>
       <input type="checkbox" :id="o" :name="o" :value="o" v-model="checkedItems" />
     </div>
     <p>{{message}}</p>
     </div>
   `
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

You should probably have a single method that decides which method to call based on the state of the component.

Stephen Gilboy0
Related