web-dev-qa-db-ja.com

Vue.js（Vueifyを使用）でコンポーネントを介してデータを表示するにはどうすればよいですか？

Vueコンポーネントにデータを表示するのに問題があります。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>
javascriptarraysnode.jsvue.js
11
parkeragee

最初の警告は、コンポーネントを定義するときに、dataオプションが次のようになることを意味します。

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

また、計算されたゲッターはその値にアクセスするたびに評価されるため、計算されたプロパティ内にajaxリクエストを入れないでください。

36
Evan You