Question

我正在将vue js与vuetify和laravel一起使用。我有一个带有动态数据表的组件，该组件可使用axios从数据库获取数据。该数据表中还有v复选框。所以一切都按我的预期进行。但是现在我想在v-checkbox中调用两个函数onchange事件。例如，当用户单击复选框时，我想调用保存功能，而当用户取消选中复选框时，我想调用删除功能。我试图用v-checkbox的ID来做，并检查该复选框是否被选中，然后调用save函数，否则调用delete函数。然后，当用户选中复选框保存功能时，将调用它，但是当用户取消选中复选框时，两个函数都将被调用。那就是我坚持的地方。我该如何存档？

数据表

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

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

1 个答案: