Свойство или метод не определены в экземпляре, но на них ссылаются во время рендеринга.

Я работаю над 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')]
});

Контроллер: 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» не определено в экземпляре, но на него ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в опции данных (найденной в корневом экземпляре)


laravel-spark
person Jass    schedule 31.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема здесь заключается в all_emergencies в родительском компоненте, где вы пытаетесь использовать компонент spark_emergency.

Вы пытаетесь отправить экстренные сообщения через реквизиты :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< /а>

person Cristi Jora    schedule 31.01.2017