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

由于视图中的HTML 不 Vue模板，因此它被视为内联，需要定义为内联模板：

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