вызов двух функций в событии v-checkbox onchange в vue js - PullRequest
Новая
       16

вызов двух функций в событии v-checkbox onchange в vue js

0 голосов
/ 15 марта 2019

Я использую vue js с vuetify и laravel. У меня есть компонент с динамическими данными, который получает данные из базы данных с помощью Axios. Также есть v-флажки в этой таблице данных. Так что все работает, как я ожидаю. Но теперь я хочу вызвать две функции onchange в v-checkbox. Например, когда пользователь устанавливает флажок (установлен), я хочу вызвать функцию сохранения, а когда пользователь снимает флажок, я хочу вызвать функцию удаления. Я попытался сделать это с помощью идентификатора v-checkbox и проверить, если этот флажок установлен, затем вызвать функцию сохранения или вызов функции 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()
   }
}

1 Ответ

3 голосов
/ 15 марта 2019

Я бы сказал, что для этого вам не нужен jQuery. Есть несколько подходов к достижению этого на v-checkbox, один из которых - использование Флажки выбранные значения как Массив .

Рассмотрим следующий пример: 

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