Question

我有以下Vue JS组件，我在重新渲染数据更改时遇到问题。

Vue.component('careers-list', {
  template: `
  <div id="career-list">
    <div class="context">
      <div v-for="career in careerData">
        <h1>{{ career.fields.jobTitle }}</h1>
        <div v-html="career.fields.jobDescription">
        </div>
      </div>
    </div>
    <div id="career-pagination">
      <button>prev</button>
      <button>1</button>
      <button v-on:click="increaseCount">next</button>
    </div>
  </div>`,

  data: function() {
    return {
     careerData: [],
     paginationCount: 0
    }
  },

  created: function() {
   this.fetchData();
  },

  methods: {
    fetchData: function() {
      client.getEntries({
        skip: this.paginationCount,
        limit: this.paginationCount + 7,
        order: 'sys.createdAt'
      })
      .then(entries => {
        this.careerData = entries.items;
        this.careerData.map(function (career) {
          career.fields.jobDescription = (marked(career.fields.jobDescription));
        });
      });
    },
    increaseCount: function() {
      this.paginationCount += 7;
    }
  }
});

var app = new Vue({
  el: '#app'
});

因为你可以看到我有一个fetchData方法来获取我的数据并对其进行格式化。看看这个方法中的这些行：

skip: this.paginationCount,
limit: this.paginationCount + 7,

在我的应用程序中，这些行确定将返回数据库中的记录数。我在我的数据对象paginationCount: 0中使用了一个计数。

然后我在我的组件模板中的一个按钮上设置了一个事件：<button v-on:click="increaseCount">next</button>

点击此按钮后，它会使用paginationCount方法更新increaseCount。

当我渲染我的应用程序并单击按钮时，paginationCount会增加但是我的fetchData方法不会重新呈现应用程序以根据计数显示相应的数据。

我认为Vue会自动更新其中包含已更改数据对象的任何方法，但我猜这不是这种情况，或者我做错了。

知道在更改fetchData后我如何更新paginationCount方法？

谢谢，尼克

Answer 1

您需要在此使用watchers，这完全适合您的用例：

当您想要执行异步或昂贵的操作以响应更改数据时，这非常有用。

方法未执行，因为您没有从中返回任何内容，这取决于vue数据变量。

您必须在paginationCount变量更改时调用您的方法：

  data: {
     careerData: [],
     paginationCount: 0
  },
  watch: {
    // whenever paginationCount changes, this function will run
    paginationCount: function (newPaginationCount) {
       this.fetchData();
    }
  },

Vue JS 2数据对象更改但方法无法运行

1 个答案: