Vue.jsインスタンスでメソッドを定義する方法

Question

こんにちは、jsonデータを要素に追加しようとしています。私は外部APIへのjsonp呼び出しを介してデータを取得します。しかし何とかvueは変数がそこにあることを認識しません。アプリケーションがlaravelにあるので、私はlaracastフォーラムでデータとメソッドのプロパティはbe defined in componentsでなければならないと読んでいますが、それでも問題は解決しません。

app.js：[ヴューが警告]：プロパティまたはメソッド「名は」インスタンスで定義されたが、レンダリング時に参照されていない私は、私は次のエラーを取得するvue.js2とlaravel 5.4 を使用しています。データオプションで無効なデータプロパティを宣言してください。ここ

は私のコードです：

app.js

Vue.component('search', 
{ 
    template: '<div class="panel-heading" ></div>', 
     data: function(){ 
     return { 
      names: [] 
     } 
    }, 

    methods: { 
     getData: function(){ 
      var self = this; 
       // GET request 
      this.$http.jsonp(url, 
      { 
      jsonpCallback: "JSON_CALLBACK" 
      }) 
      .then(
       response=>{ 
        this.names = response.body 
       })}  

     } 
}); 

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

ブレードテンプレート

<div id='search'> 
<search v-for='name in names'> 
@{{name.label.eng}} 
</search> 
</div> 

Answer 1

あなたは、自分の親のテンプレートでnamesプロパティを参照しようとしていますしかしnamesは財産ですあなたのコンポーネントのy。

ただし、ここにコンポーネントは必要ありません。明らかにはにコンポーネントを使用できますが、その場合はnamesを参照するテンプレートをコンポーネントに移動する必要があります。代わりに、ここでコンポーネントを削除します。

const app = new Vue({ 
    el: '#search', 
    data:{ 
    names: [] 
    }, 
    methods: { 
    getData(){ 
     this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"}) 
     .then(response => this.names = response.body) 
    }   
    }, 
    mounted(){ 
    this.getData() 
    } 
}); 

そして、あなたのテンプレート

<div id='search'> 
    <div v-for='name in names' class="panel-heading"> 
    @{{name.label.eng}} 
    </div> 
</div> 

Answer 2

私が間違って何が起こっていたかが分かりました。データ、メソッド、およびマウントされたプロパティをエクスポートのデフォルト{}にラップする必要がありました。これで今はうまく動作します。