2015-03-01 17 views
11

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> 

risposta

36

Il primo avviso indica quando si sta definendo un componente, l'opzione data dovrebbe apparire così:

Inoltre, non inserire richieste Ajax all'interno di proprietà calcolate, poiché i getter calcolati vengono valutati ogni volta che si accede a tale valore.

+3

Perchè @Evan You? I documenti menzionano anche [la stessa cosa] (https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function) – peter

+0

Perché i dati devono essere racchiusi in una funzione e gli oggetti di scena don don ' devo? –

Problemi correlati