如何通过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> 

Answer 1

第一个警告意味着当你定义一个组件时， 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会在你每次访问这个值的时候被评估。