时间戳

首页 > 解决方案 > 如何对 vuejs 中两个或多个监视属性的更改做出一次反应

vuejs2 - 如何对 vuejs 中两个或多个监视属性的更改做出一次反应

问题描述

这有很多用例，但我正在处理的一个如下。我有一个带有表格的页面，以及两个数据属性，“页面”和“过滤器”。当这两个变量中的任何一个被更新时，我需要再次从服务器获取结果。

但是，据我所知，没有办法观察两个变量并只做出一次反应，尤其是在复杂的实例中，更新过滤器应该将页面重置为零。

javascript

data: {
  return {
    page: 0,
    filters: {
      searchText: '',
      date: ''
    }
  }
},
watch: {
  page (nv) {
    this.fetchAPI()
  },
  filters: {
    deep: true,
    handler (nv) {
      this.page = 0
      this.fetchAPI()
    }
  }
},
methods: {
  fetchAPI () {
    // fetch data via axios here
  }
}

如果我更新过滤器，它会将页面重置为 0 并调用 fetchAPI() 两次。然而，这似乎是拥有一个包含表格的页面的最直观的方式？过滤器应该将页面重置为零，因为您可能在第 500 页上，然后您的过滤器会导致只有 1 页的结果，并且对页面或过滤器的更改必须再次调用 api。

有兴趣看看其他人必须如何被动地解决这个完全相同的问题吗？

标签： vuejs2

解决方案

遵守规则——观察者是“最后的希望”。在您有其他方法之前，您不得使用它们。

在您的情况下，您可以使用事件。这样问题就会自行解决：

将@click="onPageChange"事件添加到page按钮（或您使用的任何东西）。

将@change="onFilterChange"事件添加到filter组件（或您使用的任何东西）。您还可以使用@click="onFilterChange"一些额外的代码来检测更改。不过，我很确定你必须@change在filter组件上有类似的东西。

然后您的代码将如下所示：

data: {
  return {
    page: 0,
    filters: {
      searchText: '',
      date: ''
    }
  }
},
methods: {
  onPageChange () {
    this.fetchAPI()
  },
  onFilterChange () {
    this.page = 0
    this.fetchAPI()
  },
  fetchAPI () {
    // fetch data via axios here
  }
}

在这种情况下，onFilterChange将更改page数据但不会触发该onPageChange方法。所以你的问题不会存在。

推荐阅读