Vue JS 2 数据对象更改但方法不运行 [英] Vue JS 2 Data Object Changes However Method Doesn't Run

问题描述

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

Vue.component('职业列表', {模板:`<div id="职业列表"><div class="上下文"><div v-for="职业生涯数据"><h1>{{career.fields.jobTitle}}</h1><div v-html="career.fields.jobDescription">

<div id="职业分页"><按钮>上一个</按钮><按钮>1</按钮><button v-on:click="increaseCount">next</button>

</div>`,数据:函数(){返回 {职业数据:[]，分页计数:0}},创建:函数(){this.fetchData();},方法: {获取数据:函数(){client.getEntries({跳过:this.paginationCount，限制:this.paginationCount + 7，订单:'sys.createdAt'}).then(条目 => {this.careerData = entry.items;this.careerData.map(函数(职业){职业生涯.fields.jobDescription = (标记(career.fields.jobDescription));});});},增加计数:函数(){this.paginationCount += 7;}}});var app = new Vue({el: '#app'});

如您所见，我有一个 fetchData 方法来获取我的数据并对其进行格式化.看看这个方法中的这些行:

skip: this.paginationCount,限制:this.paginationCount + 7，

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

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

当它被点击时，它会使用 increaseCount 方法更新 paginationCount.

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

我认为 Vue 会自动更新其中包含已更改数据对象的任何方法，但是我猜事实并非如此，或者我做错了.

知道如何在 paginationCount 更改时更新我的​​ fetchData 方法吗?

谢谢尼克

解决方案

您需要使用 观察者在这里，它完全适合您的用例:

<块引用>

当您想要执行异步或昂贵的操作以响应不断变化的数据时，这是最有用的.

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

当 paginationCount 变量改变时，你必须调用你的方法:

 数据:{职业数据:[]，分页计数:0},手表: {//每当 paginationCount 改变时，这个函数就会运行paginationCount: 函数 (newPaginationCount) {this.fetchData();}},

I have the following Vue JS component that I am having an issue re-rendering on data changes.

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'
});

So as you can see I have a fetchData method that fetches my data and formats it. Take a look at these lines within this method:

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

Within my app these lines determine how many records on database will be returned. I am using a count for this within my data object paginationCount: 0.

I have then set an event on one of my buttons within my component template: <button v-on:click="increaseCount">next</button>

When this is clicked it updates the paginationCount using the increaseCount method.

When I render my application and click the button the paginationCount does increase however my fetchData method does not re-render the application to show the appropriate data based on the count.

I thought that Vue automatically updates any methods that have a changed data object in them however I am guessing this isn't the case or I am doing this wrong.

Any idea how I can update my fetchData method when the paginationCount is changed?

Thanks, Nick

解决方案

You need to use watchers here, which suits exactly your use-case:

This is most useful when you want to perform asynchronous or expensive operations in response to changing data.

Method is not executed as you are not returning anything from it, which depends on the vue data variable.

You have to invoke your method when paginationCount variable changes:

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

这篇关于Vue JS 2 数据对象更改但方法不运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！