VueJS - Области данных и методов

Question

У меня есть приложение Laravel, и я маршрутизирую его, чтобы динамически переключаться между компонентами Vue. Например:

Laravel лезвие Вид 1 (template.blade.php)

... 
<component is="@yield('vue')"> 
    @yield('content') 
</component> 
... 

Laravel лезвие Вид 2

@extends('template') 

@section('vue', 'form-view'); 

@section('content') 
    <form @submit.prevent="submitForm"> 
     <button type="submit">Submit Form</button> 
    </form> 
@stop 

Вьет экземпляр

import FormView from 'FormView'; 

new Vue({ 
    el: 'body', 
    components: { 
     FormView, 
    }, 
}); 

FormView.js

export default { 
    methods: { 
     submitForm() { 
      alert('hello'); 
     }, 
    }, 
}; 

Вопрос заключается в том, что я получаю следующее сообщение в консоли:

[Vue warn]: v-on:submit="submitForm" expects a function value, got undefined 

Я делаю что-то не так?

Answer 1

Как HTML в представлении является не Вьет шаблон он рассматривается как инлайн и должны быть определены в качестве шаблона инлайн:

... 
<component is="@yield('vue')" inline-template> 
    @yield('content') 
</component> 
...