如何在Vue数据对象中运行函数？ [英] How can I run functions within a Vue data object?

问题描述

所以我试图在Vue JS中使用以下组件：

  Vue.component（'careers'，{
模板：'< div>自定义组件！< / div>'，
 
数据：function（）{
 
 var careerData = []; 
 
 client.getEntries（）
 .then（function（entries）{
 //记录所有条目的标题
 entries.items.forEach（ function（entry）{
 if（entry.fields.jobTitle）{
 careerData.push（entry）; 
} 
}）
}）; 
 
返回careerData; 
} 
}）; 
  

以下代码会发出如下错误：

  [Vue警告]：数据函数应返回一个对象：
 https://vuejs.org/v2/guide/components.html#data-Must-Be- a-Function 
（在组件中找到< careers>）
  

但是你可以看到我通过我的所有Contentful 条目运行foreach，然后条目中的每个对象被推送到一个数组，然后我尝试返回数组但是我收到错误。

我知道如何将所有条目提取到我的组件中的数据对象？

当我在Vue组件之外使用 client.getEntries（）函数时，我得到以下数据：

解决方案

这种方式完全是WR第一件事 - 首先让你的数据模型保持干净 - 所以没有方法。

第二件事，正如错误所说，当你将数据处理成组件时，数据应该是返回对象的函数：

  Vue .component（'职业'，{
模板：'< div>自定义组件！< / div>'，
 
数据：function（）{
 return { 
 careerData：[] 
} 
} 
}）; 
  

在我写的时候，数据提取和其他逻辑不应该在数据中，有一个对象在Vue.js中保留的名为 methods 。

所以将你的逻辑移到方法中，当你有收到数据后，您可以将其分配给 careerData ，如下所示：

  this.careerData = newData 
  

或像之前一样将数据推送到数组。最后，你可以在一些生命周期钩子上调用该方法：

  Vue.component（'careers'，{
模板：'< div>自定义组件！< / div>'，
 
数据：function（）{
 return {
 careerData：[] 
} 
}，
 
创建：function（）{
 this.fetchData（）; 
}，
 
方法： {
 fetchData：function（）{
 //这里的获取逻辑
} 
} 
}）; 
  

So I am trying to use the following component within 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;
  }
});

The following code emits an error like so:

[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in component <careers>)

However as you can see I am running a foreach through all of my Contentful entries, then each object within entries is being pushed to an array, I then try to return the array but I get an error.

Any idea how I can extract all of my entries to my data object within my component?

When I use the client.getEntries() function outside of my Vue component I get the following data:

解决方案

This way is totally wrong.

First thing first - keep your data model as clean as possible - so no methods there.

Second thing, as error says, when you are dealing with data into component, data should be function that returns an object:

Vue.component('careers', {
  template: '<div>A custom component!</div>',

  data: function() {
    return {
     careerData: []
    }
  }
});

As I write, data fetching and other logic shouldn't be in the data, there is an object reserved for that in Vue.js called methods.

So move your logic into the methods, and when you have received the data, you can assign it to careerData like this:

this.careerData = newData

or push things to the array like you did before. And then at the end, you can call the method on some lifecycle hooks:

Vue.component('careers', {
  template: '<div>A custom component!</div>',

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

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

  methods: {
    fetchData: function() {
      // your fetch logic here
    }
  }
});

这篇关于如何在Vue数据对象中运行函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！