在 VueJS 中使用观察者？

Question

我正在尝试在 VueJS 中使用 Watchers，但我很难理解它们。例如，在这种情况下，我已经设置了一个 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>

我不太确定我将如何使用那只手表，所以如果有人能帮助我，我将不胜感激。谢谢。

Answer 1

您正在为 activeTab 使用粗箭头函数，它必须是一个普通函数，否则它没有正确引用 this

改为：

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

此外，当您使用“全选”框时，您的代码存在问题。

根据经验，所有顶级函数都应使用 function 声明。当嵌套函数需要访问 this

时，仅在函数内部使用 =>

在 VueJS 中使用观察者？

Using watchers in VueJS?

javascript

watch

vue.js

vuetify.js