属性或方法未在实例上定义，但在渲染期间引用答案

【问题标题】：Property or method is not defined on the instance but referenced during render属性或方法未在实例上定义，但在渲染期间引用
【发布时间】：2017-06-16 19:19:12
【问题描述】：

我正在研究 laravel + spark + vuejs。我正在尝试制作新模块，以下是代码。

routes/web.php

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

Vue js： 资源/assets/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')]
});

控制器： app/Http/Controllers/EmergencyPlanTemplateController.php

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

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

查看：resources/views/vendor/spark/emergency-template-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”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性（在根实例中找到）

【问题讨论】：

标签： laravel-spark

【解决方案1】：

这里的问题是您尝试使用spark_emergency 组件的父组件中的all_emergencies。

您尝试通过 props :all_emergencies="all_emergencies" 发送紧急情况，这基本上意味着您希望从组件的父组件向子组件发送一些数据。

由于你在created钩子里面初始化了组件本身this.$http...里面的紧急情况，所以没有必要把它作为一个prop发送。这应该使它工作。

<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

【讨论】：