如何通过Vue.js组件(使用Vueify)显示数据?

我无法获得数据显示在我的Vue组件。 我正在使用Vueify,并试图从listings.vue .vue组件加载列表的数组,我不断收到错误。 此外,我不明白如何通过computed方法拉入数据。 任何帮助,将不胜感激。

这是我在控制台中得到的错误:

 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. [Vue warn]: $mount() should be called only once. 

这是我的app.vue

 // app.vue <style> .red { color: #f00; } </style> <template> <div class="container"> <div class="listings" v-component="listings" v-repeat="listing"></div> </div> </template> <script> module.exports = { replace: true, el: '#app', components: { 'listings': require('./components/listings.vue') } } </script> 

这是我的listings.vue组件

 <style> .red { color: #f00; } </style> <template> <div class="listing">{{title}} <br> {{description}}</div> </template> <script> module.exports = { data: { listing: [ { title: 'Listing title number one', description: 'Description 1' }, { title: 'Listing title number two', description: 'Description 2' } ] }, // computed: { // get: function () { // var request = require('superagent'); // request // .get('/post') // .end(function (res) { // // Return this to the data object above // // return res.title + res.description (for each one) // }); // } // } } </script> 

       

网上收集的解决方案 "如何通过Vue.js组件(使用Vueify)显示数据?"

第一个警告意味着当你定义一个组件时, data选项应该是这样的:

 module.exports = { data: function () { return { listing: [ { title: 'Listing title number one', description: 'Description 1' }, { title: 'Listing title number two', description: 'Description 2' } ] } } } 

另外,不要把Ajax请求放在计算属性中,因为计算得到的getter会在你每次访问这个值的时候被评估。