मैं Vue.js (Vueify का उपयोग करके) के साथ घटकों के माध्यम से डेटा कैसे प्रदर्शित करूं?

Question

मुझे अपने व्यू घटकों में डेटा प्रदर्शित करने में परेशानी हो रही है। मैं Vueify का उपयोग कर रहा हूं और मैं listings.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 अनुरोध डाल नहीं है, के बाद से गणना ही टिककर खेल आपको लगता है कि मूल्य का उपयोग हर बार का मूल्यांकन किया जाता है।