J'utilise vuejs pour quelques fonctionnalités mineures dans une application Laravel (c'est à dire pas de composants) et pour une raison que je n'ai pas encore découverte, j'utilise vuejs pour des fonctionnalités mineures dans une application Laravel (c'est à dire pas de composants) et pour une raison que je n'ai pas encore découverte. v-model ne fonctionne pas.
Voici le fichier blade de mon modèle de base qui a été généré par l'intermédiaire de l'application php artisan make:auth Le contenu a été en grande partie supprimé parce qu'il n'était pas pertinent :
resources/views/layouts/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>Voici le fichier dans lequel v-model est utilisé et ne fonctionne pas. Là encore, les parties non pertinentes ont été supprimées :
resources/views/instructors/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>
@endpushLe champ de saisie qui v-model="message" est lié à est complètement vide, cependant, lors de la sortie de message Grâce aux accolades, je peux voir sa valeur. Voici à quoi cela ressemble :
Une idée de ce qui ne va pas ? J'ai vérifié la console et les outils de développement de Vue et aucune erreur n'apparaît, en fait rien n'apparaît du tout dans les outils de développement de Vue - un problème peut-être ? J'ai copié-collé ces extraits de code à partir de l'introduction de la documentation Vue pour m'assurer que je ne faisais pas quelque chose de stupide. J'ai essayé de définir l'attribut data à l'intérieur de l'instance Vue en tant que fonction renvoyant un objet, mais cela ne fait aucune différence. Le code fonctionne également ici : https://jsfiddle.net/eywraw8t/249625/ où le champ de saisie affiche la valeur de message comme je l'attends.
Je ne me considère pas comme un pro de Vue, mais je ne suis pas un débutant et je n'arrive pas à comprendre ce qui se passe. Toute aide serait appréciée, merci !
Mise à jour
Merci à tous ceux qui ont répondu. J'ai fait une erreur stupide... J'ai oublié qu'il y a de la JS qui est tirée, dans la section <head> en cours d'exécution make:auth - cela inclut Vue par défaut. J'ai oublié de regarder correctement ici car j'ai supposé que c'était antérieur à </body> . Je pense que les deux scripts JS étaient en conflit, ce qui a causé le problème. Voir head ci-dessous :
<!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>J'ai commenté le script et cela fonctionne bien maintenant.
