Vue JS simple v-model functionality on input field not working in Laravel app

Question

I am using vuejs as a drop in for some minor functionality in a Laravel app (i.e. not components) and for some reason that I'm yet to discover v-model is not working.

Here's my base layout blade file that was generated via php artisan make:auth, contents mostly removed as irrelevant:

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>

Here's the file where v-model is being used and not working, again, irrelevant parts have been removed:

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>
@endpush

The input field which v-model="message" is bound to is completely empty, however, when outputting message via curly braces I can see it's value. This is what it looks like:

Any ideas what's going wrong? I have checked the console and Vue dev tools and no errors show up, in fact nothing shows up at all in Vue dev tools - an issue perhaps? I copy pasted these code snippets from the Vue docs introduction to make sure I wasn't doing something silly. I have tried setting the data attribute inside the Vue instance as a function returning an object but it makes no difference. I also have the code working here: https://jsfiddle.net/eywraw8t/249625/ where the input field shows the value of message as I am expecting it to work.

I wouldn't consider myself a Vue pro but I'm no beginner and I cannot quite figure out what's going on. Any help would be appreciated, thanks!

Update

Thanks to everyone who answered. Made a silly mistake... I forgot that there is some JS that is pulled in, in the <head> when running make:auth - this includes Vue by default. I forgot to look properly here as assumed it would be prior to </body>. I believe the two JS scrips were conflicting which was causing the issue. See head below:

<!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>

I commented the script out and it's working fine now.

This is truly weird. Are you using any other third-party libraries aside from vue? — Julian Paolo Dayag, Commented Aug 8, 2018 at 5:08
It seems that you are using bootstrap, but are you using any input library? like x-editable or anything? — Julian Paolo Dayag, Commented Aug 8, 2018 at 5:09
@JulianPaoloDayag thanks for your reply, made a silly mistake see my update in question for explanation — haakym, Commented Aug 8, 2018 at 8:50

Udhav Sarvaiya · Accepted Answer · 2018-08-08 06:19:32Z

1

For vue.js 2 use the following:

<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>

For more details how to work on v-model: Laracasts_episodes_2

answered Aug 8, 2018 at 6:19

Udhav Sarvaiya

10.1k13 gold badges60 silver badges67 bronze badges

Thanks for your answer, made a silly mistake see question for explanation
– haakym
Commented Aug 8, 2018 at 8:51

Add a comment |

Mayuri Pansuriya · Accepted Answer · 2018-08-08 05:25:29Z

try the following code

@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

Thanks for your answer, made a silly mistake see question for explanation — haakym, Commented Aug 8, 2018 at 8:51

Collectives™ on Stack Overflow

Vue JS simple v-model functionality on input field not working in Laravel app

Update

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

Related