Vue.js (Vueify kullanarak) ile bileşenleri nasıl görüntüleyebilirim?

Question

Vue bileşenlerinde görüntülemek için veri almayla ilgili sorun yaşıyorum. Vueify kullanıyorum ve listings.vue bileşeninden bir dizi giriş yüklemeye çalışıyorum ve hata almaya devam ediyorum. Ayrıca, computed yöntemiyle verileri nasıl çekeceğinizi anlamıyorum. Herhangi bir yardım takdir edilecektir.

Bu

ben konsolda alıyorum hatadır: Burada

[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. 

benim listings.vue bileşeni benim app.vue İşte

// 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> 

olduğu

<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

İlk uyarı, bir bileşeni tanımladığınızda, data seçeneği şu şekilde görünmelidir:

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

Ayrıca, hesaplanan alıcılar bu değere her eriştiğinizde değerlendirildiğinden, hesaplanan özellikler içinde ajax istekleri de yazmayın.