所以我试图在Vue JS中使用以下组件:
Vue.component('careers', {
template: '<div>A custom component!</div>',
data: function() {
var careerData = [];
client.getEntries()
.then(function (entries) {
// log the title for all the entries that have it
entries.items.forEach(function (entry) {
if(entry.fields.jobTitle) {
careerData.push(entry);
}
})
});
return careerData;
}
});
以下代码会发出如下错误:
[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
(found in component <careers>)
但是你可以看到我正在通过我的所有Contentful entries
运行foreach,然后条目中的每个对象都被推送到一个数组,然后我尝试返回数组但是我收到错误。< / p>
知道如何将我的所有entries
提取到我的组件中的数据对象吗?
当我在Vue组件之外使用client.getEntries()
函数时,我得到以下数据:
答案 0 :(得分:14)
这种方式完全错了。
首先要做的是 - 尽可能保持数据模型的清洁 - 所以没有方法。
第二件事,正如错误所说,当你将数据处理成组件时,数据应该是返回对象的函数:
Vue.component('careers', {
template: '<div>A custom component!</div>',
data: function() {
return {
careerData: []
}
}
});
在我写的时候,数据提取和其他逻辑不应该在数据中,在Vue.js中有一个名为methods
的保留对象。
因此,将您的逻辑移到方法中,当您收到数据时,可以将其分配给careerData
,如下所示:
this.careerData = newData
或像以前一样将数据推送到数组中。然后在最后,您可以在某些生命周期钩子上调用该方法:
Vue.component('careers', {
template: '<div>A custom component!</div>',
data: function() {
return {
careerData: []
}
},
created: function() {
this.fetchData();
},
methods: {
fetchData: function() {
// your fetch logic here
}
}
});
答案 1 :(得分:0)
有时您被迫在数据对象中使用函数,例如将数据和函数发布到某些框架组件时(例如 element-ui shortcuts in datepicker)。因为vue中的data其实是一个函数,所以可以在return语句之前在里面声明函数:
export default {
data() {
let onClick = (picker) => {
picker.$emit('pick', new Date());
this.myMethod();
}
return {
pickerOptions: {
shortcuts: [{
text: 'Today',
onClick: onClick
}]}
};
},
methods:{
myMethod(){
console.log("foo")
}
},
};
如果你愿意,你可以用这个指向方法。它不是特别干净,但有时可能会派上用场。