Question

我正在使用vuejs作为Laravel应用程序中某些次要功能（即非组件）的替代品，并且由于某些原因我尚未发现v-model无法正常工作。

这是我的基本布局刀片文件，它是通过php artisan make:auth生成的，大部分内容由于不相关而被删除：

资源/视图/布局/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <!-- css imports etc. -->
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <!-- nav menu -->
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @stack('scripts') <---- Javascript goes here!
</body>
</html>

这是正在使用v-model且不起作用的文件，同样，不相关的部分也已删除：

资源/视图/讲师/create.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">
                            <h2>vue: @{{ message }}</h2> <-- This works
                            <div>
                                <input type="text" v-model="message">  <-- Blank!!?
                            </div>
                        </div>
                        <!-- more html -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
@endpush

绑定到v-model="message"的输入字段完全为空，但是，通过花括号输出message时，我可以看到它的值。看起来像这样：

任何想法出了什么问题？我已经检查过控制台和Vue开发工具，没有错误显示，实际上Vue开发工具中什么都没有显示-也许是问题吗？我复制并粘贴了Vue docs简介中的这些代码段，以确保我没有做任何愚蠢的事情。我尝试将Vue实例内部的data属性设置为返回对象的函数，但这没有区别。我的代码也可以在这里工作：https://jsfiddle.net/eywraw8t/249625/，其中输入字段显示message的值，正如我期望的那样。

我不会认为自己是Vue专业人士，但我不是初学者，也无法完全了解发生了什么。任何帮助将不胜感激，谢谢！

更新

感谢所有回答的人。犯了一个愚蠢的错误...我忘记了在运行<head>时在make:auth中引入了一些JS-默认情况下包括Vue。我忘记在这里看起来像在</body>之前那样正确。我认为这两个JS脚本冲突，这导致了问题。请参阅下面的head：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script> <-- Vue included here

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

我将脚本注释掉了，现在可以正常工作了。

Answer 1

对于vue.js 2，请使用以下代码：

commitTo

有关如何在v模型上工作的更多详细信息：Laracasts_episodes_2

Answer 2

尝试以下代码

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">
                            <div id="app">
                                <template>
                                    <div>
                                        <div class="card-title">
                                            <h2>
                                                Add Instructor
                                            </h2>
                                            <h2>vue: @{{ message }}</h2>
                                            <div>
                                                <input type="text" v-model="message">
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>

                        </div>
                        <!-- more html -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
        });
    </script>
@endpush

输入字段上的Vue JS简单v模型功能在Laravel应用中不起作用

更新

2 个答案: