プロパティまたはメソッドがインスタンスで定義されていないが、レンダリング中に参照される

Question

私はlaravel + spark + vuejsを処理しています。私は新しいモジュールを作成しようとしており、以下はコードです。

ルート/ web.php

Route::get('/emergency-template-plan', 'EmergencyPlanTemplateController@emergencyTemplatePlan'); 

VueのJS：リソース/資産/ JS/app.js

require('spark-bootstrap'); 
require('./components/bootstrap'); 

Vue.component('spark-emergency', { 
data() { 
    return { 
     all_emergencies:[] 
    }; 
}, 
created() { 
    this.getEmergencies(); 
}, 
methods: { 
    getEmergencies() { 
     this.$http.get('/emergency-template-plan') 
      .then(response => { 
       this.all_emergencies = response.data; 
      }); 
    } 
} 
}); 

var app = new Vue({ 
mixins: [require('spark')] 
}); 

コントローラー：アプリ/ HTTP /コントローラ/ EmergencyPlanTemplateController .php

public function emergencyTemplatePlan(){ 
    $data = EmergencyPlanTemplate::all(); 

    return view('spark::emergency-template-plan', ['emergencies'=>$data]); 
} 

ビュー：リソース/ビュー/ベンダー/火花/緊急のテンプレートplan.blade.php

@extends('spark::layouts.app') 
@section('content') 
<spark-emergency :all_emergencies="all_emergencies" inline-template>  
<tr v-for="emergency in all_emergencies"> 
    <td> 
     <div class="btn-table-align"> 
      @{{ emergency.type }} 
     </div> 
    </td> 
</tr> 
</spark-emergency> 
@endsection 

私はVueの]は警告し、次のエラーに

を取得しています。プロパティやメソッド "all_emergenciesは" ではありませんインスタンスで定義されているが、レンダリング中に参照されます。データオプションに無効データプロパティを宣言してください（ルートインスタンスにあります）

Answer 1

ここでの問題は、spark_emergencyコンポーネントを使用しようとする親コンポーネントのall_emergenciesです。

あなたは小道具を介して緊急事態を送信しようとします:all_emergencies="all_emergencies"基本的にあなたのコンポーネントの親からいくつかのデータを子コンポーネントに送信することを意味します。

this.$http...createdフックの内部で緊急事態を初期化するので、それを支柱として送る必要はありません。これはそれを動作させるはずです。

<spark-emergency inline-template>  
<tr v-for="emergency in all_emergencies"> 
<td> 
    <div class="btn-table-align"> 
     @{{ emergency.type }} 
    </div> 
</td> 
</tr> 
</spark-emergency> 

さらにそれが働いたhttps://vuejs.org/v2/guide/components.html#Props