javascript 如何使用 Vue.js（使用 Vueify）通过组件显示数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28800094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display data through components with Vue.js (using Vueify)?
提问by parkeragee
I'm having trouble getting data to display in my Vue components. I'm using Vueify and I'm trying to load an array of listings from the listings.vuecomponent and I keep getting errors. Also, I don't understand how to pull in the data via the computedmethod. Any help would be appreciated.
我无法让数据显示在我的 Vue 组件中。我正在使用 Vueify，我正在尝试从listings.vue组件加载一系列列表，但我不断收到错误消息。另外，我不明白如何通过该computed方法提取数据。任何帮助，将不胜感激。
This is the error I'm getting in the console:
这是我在控制台中遇到的错误：
[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.
Here is my app.vue
这是我的 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>
Here is my listings.vue component
这是我的 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>
回答by Evan You
The first warning means when you are defining a component, the dataoption should look like this:
第一个警告意味着在定义组件时，该data选项应如下所示：
module.exports = {
data: function () {
return {
listing: [
{
title: 'Listing title number one',
description: 'Description 1'
},
{
title: 'Listing title number two',
description: 'Description 2'
}
]
}
}
}
Also, don't put ajax requests inside computed properties, since the computed getters gets evaluated every time you access that value.
此外，不要将 ajax 请求放在计算属性中，因为每次访问该值时都会对计算得到的 getter 进行评估。
