5

VueJS アプリを作成しようとしていますが、最も単純な例でも失敗しています。私は VueJS のビルド済みサポートを備えた Laravel 5.3 を使用しています (バージョン 1、バージョン 2 も試しました)。

ここに私の Example.vue コンポーネントがあります

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

そして、ここにメインコードがあります

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

これは、コンソールに毎回表示されるエラーです。

[Vue 警告]: プロパティまたはメソッド「name」はインスタンスで定義されていませんが、レンダリング中に参照されています。data オプションでリアクティブ データ プロパティを宣言してください。(コンポーネントにあります)

何が間違っているのですか？ありがとう

4

3 に答える 3

2

使用するscript代わりにタグでexport default：

module.exports = {
  data() {
    return { counter: 1 }
  }
}

これはあなたのために働くはずです

于 2016-10-08T22:34:10.277 に答える
1

テンプレート内でコンポーネントを呼び出す

Vue.component('example', {
  template: `<div class="profile">{{ name }}</div>`,
  data () {
return {
  name: 'John Doe'
}
  }
})

const app = new Vue({
  el: '#app'
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>

于 2016-10-08T18:01:18.577 に答える
0

問題は、そのファイルからコンポーネント 'example' を読み込もうとしているが、名前を付けていないことです。以下を使用する必要があります。

<script>
   export default {
     name: 'example',
     data() {
       return {
         name: 'John Doe'
       }
     }
   }
</script>

または、次の方法でコンポーネントをロードします (拡張子 .vue が必要かどうかは不明です)。

require('./exmaple').default();

Babel を使用している場合は、次の構文を使用して名前を付けずにコンポーネントをロードすることもできます。

import Example from ./example

また、この投稿をチェックして、Babelを使用する場合に備えて詳細情報を入手してください

于 2016-10-18T14:24:03.530 に答える