Sto riscontrando problemi nel visualizzare i dati nei componenti di Vue. Sto utilizzando Vueify e sto cercando di caricare una serie di elenchi dal componente listings.vue
e continuo a ricevere errori. Inoltre, non capisco come inserire i dati tramite il metodo computed
. Qualsiasi aiuto sarebbe apprezzato.Come posso visualizzare i dati tramite i componenti con Vue.js (usando Vueify)?
Questo è l'errore che sto ottenendo nella 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.
Ecco il mio 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>
Qui è la mia componente 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>
Perchè @Evan You? I documenti menzionano anche [la stessa cosa] (https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function) – peter
Perché i dati devono essere racchiusi in una funzione e gli oggetti di scena don don ' devo? –