javascript - call to two functions in v-checkbox onchange event in vue js - Stack Overflow

admin管理员组

文章数量:1352158

I'm using vue js with vuetify and laravel. I have a ponent with a dynamic datatable which gets data from database using axios. Also there's v-checkboxes in that datatable. So everything is working as i expect. But now I want to call to two functions onchange event in v-checkbox. For example when user click the checkbox (checked) I want to call to a save function and when user uncheck the checkbox I want to call to a delete function. I tried to do it with the id of the v-checkbox and check if that checkbox is checked then call to save function else call to delete function. And then when user checked the checkbox save function get called but when user uncheck the checkbox both functions get called. That's where I'm stuck at. How can I archieve this?

datatable

<v-data-table :headers="customer_headers" :items="customers" :search="customer_search" item-key="CustomerCode" ref="customer_table">
   <template slot="items" slot-scope="props">
     <tr :id="'customer_tr_'+props.item.CustomerCode">
       <td class="text-md-center">{{ props.item.CustomerCode }}</td>
       <td class="text-md-center">{{ props.item.CustomerName }}</td>
       <td class="text-md-center">{{ props.item.NO_OF_DISPENSERS }}</td>
       <td class="text-md-center">{{ props.item.next_service_date }}</td>
       <td class="text-md-center">{{ props.item.STATUS }}</td>
       <td class="text-md-center">{{ props.item.Workerstatus }}</td>
       <td class="text-md-center">
         <v-checkbox
                     :key="props.item.CustomerCode"
                     :ref="'customer_checkbox_ref' + props.item.CustomerCode"
                     :id="'customer_checkbox_'+props.item.CustomerCode"
                     @change="loadCustomerDispensers(props.item.CustomerCode,props.item.STATUS);changeServicePlanData()"
                     ></v-checkbox>
       </td>
     </tr>
  </template>
</v-data-table>

I 'm trying this in changeServicePlanData() functionchangeServicePlanData()

function changeServicePlanData(id) {
   if ($('#' + id).checked == true) {
      this.savePlan()
   } else {
      this.deletePlan()
   }
}

I'm using vue js with vuetify and laravel. I have a ponent with a dynamic datatable which gets data from database using axios. Also there's v-checkboxes in that datatable. So everything is working as i expect. But now I want to call to two functions onchange event in v-checkbox. For example when user click the checkbox (checked) I want to call to a save function and when user uncheck the checkbox I want to call to a delete function. I tried to do it with the id of the v-checkbox and check if that checkbox is checked then call to save function else call to delete function. And then when user checked the checkbox save function get called but when user uncheck the checkbox both functions get called. That's where I'm stuck at. How can I archieve this?

datatable

<v-data-table :headers="customer_headers" :items="customers" :search="customer_search" item-key="CustomerCode" ref="customer_table">
   <template slot="items" slot-scope="props">
     <tr :id="'customer_tr_'+props.item.CustomerCode">
       <td class="text-md-center">{{ props.item.CustomerCode }}</td>
       <td class="text-md-center">{{ props.item.CustomerName }}</td>
       <td class="text-md-center">{{ props.item.NO_OF_DISPENSERS }}</td>
       <td class="text-md-center">{{ props.item.next_service_date }}</td>
       <td class="text-md-center">{{ props.item.STATUS }}</td>
       <td class="text-md-center">{{ props.item.Workerstatus }}</td>
       <td class="text-md-center">
         <v-checkbox
                     :key="props.item.CustomerCode"
                     :ref="'customer_checkbox_ref' + props.item.CustomerCode"
                     :id="'customer_checkbox_'+props.item.CustomerCode"
                     @change="loadCustomerDispensers(props.item.CustomerCode,props.item.STATUS);changeServicePlanData()"
                     ></v-checkbox>
       </td>
     </tr>
  </template>
</v-data-table>

I 'm trying this in changeServicePlanData() functionchangeServicePlanData()

function changeServicePlanData(id) {
   if ($('#' + id).checked == true) {
      this.savePlan()
   } else {
      this.deletePlan()
   }
}

• javascript
• jquery
• vue.js
• checkbox
• vuetify.js

Share Improve this question Follow edited Mar 15, 2019 at 6:50 Smithiam 15811 silver badge1616 bronze badges asked Mar 15, 2019 at 6:07 KasunKasun 52311 gold badge1010 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I would say you don't need jQuery for this. There are several approaches to achieving this on v-checkbox, one being the use of Checkboxes selected values as Array.

Consider the following example:

new Vue({
  el: '#app',

  data() {
    return {
      items: [{
          label: 'Item #1',
          value: 1
        },
        {
          label: 'Item #2',
          value: 2
        },
        {
          label: 'Item #3',
          value: 3
        }
      ],

      selected: [2] // Preselects Item #2
    }
  },

  methods: {
    check(val) {
      let action = '';

      if (this.selected.includes(val)) {
        action = 'Saving';
      } 
      else {
        action = 'Deleting';
      }

      alert(`${action} plan #${val}`);
    }
  }
});

.v-input {
  margin-top: 0 !important;
}

<link href="https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container fluid>
      <v-checkbox v-model="selected" 
                  v-for="item in items" 
                  :key="item.value"
                  :label="item.label" 
                  :value="item.value"
                  @change="check(item.value)"></v-checkbox>
    </v-container>
  </v-app>
</div>

So, in your case, I would do something like so:

<v-data-table 
  :headers="customer_headers" 
  :items="customers" 
  :search="customer_search" 
  item-key="CustomerCode" 
  ref="customer_table">

  <template slot="items" slot-scope="{ item }">
    <tr>
      <!-- the other TDs here -->

      <td class="text-md-center">

        <v-checkbox
          v-model="selectedCustomerCodes"
          v-bind:value="item.CustomerCode"
          label="Service plan data"
          @change="loadCustomerDispensers(item.CustomerCode, item.STATUS)">
        </v-checkbox>

      </td>
    </tr>
  </template>

</v-data-table>

data() {
  return {
    selectedCustomerCodes: []
  }
},

methods: {
  loadCustomerDispensers(customerCode, status) {
    // Your business logic

    this.changeServicePlanData(customerCode);
  },

  changeServicePlanData(code) {
    if (this.selectedCustomerCodes.includes(code)) {
      this.savePlan();
    } 
    else {
      this.deletePlan();
    }
  },

  savePlan() {
    // ...
  },
  deletePlan() {
    // ...
  }
}

本文标签： javascriptcall to two functions in vcheckbox onchange event in vue jsStack Overflow