laravel - 输入字段上的 Vue JS 简单 v-model 功能在 Laravel 应用程序中不起作用

问题描述

我正在使用 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 文档介绍中复制粘贴了这些代码片段，以确保我没有做傻事。我尝试将 Vue 实例中的 data 属性设置为返回对象的函数，但这没有区别。我也有代码在这里工作：https ://jsfiddle.net/eywraw8t/249625/其中输入字段显示message我期望它工作的值。

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

更新

感谢所有回答的人。犯了一个愚蠢的错误......我忘记了<head>在运行时有一些 JS 被拉入make:auth- 默认情况下包括 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>

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

标签： laravelvue.jsvuejs2

<html> <body> <div id="app"> <h1>Vue: @{{message}}</h1> <input v-model="message"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>

laravel - 输入字段上的 Vue JS 简单 v-model 功能在 Laravel 应用程序中不起作用

问题描述

更新

解决方案

推荐阅读