Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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.vue component and I keep getting errors. Also, I don't understand how to pull in the data via the computed method. Any help would be appreciated.

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

<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>
share|improve this question

The first warning means when you are defining a component, the data option should look like this:

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.