在 vue js 中调用 v-checkbox onchange 事件中的两个函数

Question

我将 vue js 与 vuetify 和 laravel 一起使用。我有一个带有动态数据表的组件，它使用 axios 从数据库中获取数据。该数据表中还有 v-checkboxes。所以一切都按我的预期工作。但是现在我想在 v-checkbox 中调用两个函数 onchange 事件。例如，当用户单击复选框（选中）时，我想调用保存功能，当用户取消选中复选框时，我想调用删除功能。我尝试使用 v-checkbox 的 id 来执行此操作，并检查该复选框是否已选中，然后调用保存函数，否则调用删除函数。然后，当用户选中复选框时，保存函数被调用，但当用户取消选中复选框时，两个函数都会被调用。这就是我被困的地方。我该如何存档？

数据表

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

我正在尝试这个changeServicePlanData()功能changeServicePlanData()

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

Answer 1

我会说你不需要jQuery。有几种方法可以实现这一点v-checkbox，一种是使用Checkboxes选择的值作为Array。

考虑以下示例：

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

所以，在你的情况下，我会做这样的事情：

<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() {
    // ...
  }
}