Использование наблюдателей в VueJS? - PullRequest
Новая
       39

Использование наблюдателей в VueJS?

0 голосов
/ 03 мая 2020

Я пытаюсь использовать Наблюдателей в VueJS, но мне тяжело оборачиваться вокруг них. Например, в этом случае я установил watch, который проверяет, открыта ли вкладка, и если вкладка меняется, она должна сбросить значение selected обратно в пустой массив. Теперь я установил параметры как oldValue и newValue, но я не совсем уверен, как я буду их использовать.

Проверьте это codepen .

Вот Полный пример: - 

new Vue({
  el: "#app",
  data() {
    return {
      tabs: ["Tab1", "Tab2"],
      activeTab: 0,
      headers: [{
          text: "Dessert (100g serving)",
          align: "left",
          value: "name"
        },
        {
          text: "Calories",
          value: "calories"
        }
      ],
      items: [{
          name: "Ice cream sandwich",
          calories: 237
        },
        {
          name: "Frozen Yogurt",
          calories: 159
        }
      ],
      selected: []
    };
  },
  methods: {
    toggleAll() {
      if (this.selected.length) this.items = [];
      else this.selected = this.items.slice();
    }
  },
  watch: {
    activeTab: (oldValue, newValue) => {
      if (oldValue !== newValue) {
        this.selected = [];
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-tabs fixed-tabs v-model="activeTab">
      <v-tab v-for="tab in tabs" :key="tab">
        {{ tab }}
      </v-tab>
      <v-tab-item v-for="tab in tabs" :key="tab">
        <v-data-table v-model="selected" :headers="headers" :items="items" select-all item-key="name" class="elevation-1" hide-actions>
          <template v-slot:headers="props">
            <tr>
              <th>
                <v-checkbox :input-value="props.all" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAll"></v-checkbox>
              </th>
              <th v-for="header in props.headers" :key="header.text">
                <v-icon small>arrow_upward</v-icon>
                {{ header.text }}
              </th>
            </tr>
          </template>
          <template v-slot:items="props">
            <tr :active="props.selected" @click="props.selected = !props.selected">
              <td>
                <v-checkbox :input-value="props.selected" primary hide-details></v-checkbox>
              </td>
              <td>{{ props.item.name }}</td>
              <td>{{ props.item.calories }}</td>
            </tr>
          </template>
        </v-data-table>
      </v-tab-item>
    </v-tabs>
  </v-app>
</div>

Я не совсем уверен, как я буду использовать эти часы, так что, если кто-то может помочь мне с этим, я, несомненно, был бы признателен. Спасибо.

1 Ответ

1 голос
/ 03 мая 2020

Вы используете функцию жирной стрелки для activeTab, она должна быть нормальной функцией или не имеет правильной ссылки на this

Изменить на: 

activeTab: function (oldValue, newValue) { // function instead of =>
  if (oldValue !== newValue) {
    this.selected = [];
  }
}

Кроме того, существует проблема с вашим кодом, когда вы используете флажок «все».

Как хорошее правило, все функции верхнего уровня должны быть объявлены с использованием function. Используйте => внутри самих функций, только когда вложенной функции требуется доступ к this

...