我有以下 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:
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 数据对象更改但方法不运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！