laravel - VueJS - 数据和方法范围

Question

我有一个 Laravel 应用程序，我正在通过它进行路由以在 Vue 组件之间动态切换。例如:

Laravel Blade View 1 (template.blade.php)

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

Laravel Blade View 2

@extends('template')

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

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

Vue 实例

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

由于 View 中的 HTML 不是 Vue 模板，它被认为是内联的，需要定义为内联模板:

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