[Vue warn]:Property or method is not defined on the instance but referenced during render

Question

I use laravel 5.7 and vue 2.5.7, I just learned vue.js a few weeks ago, I'm following an advanced series to make a blog using laravel and vue on youtube. I thought I had followed what was done in the video correctly, there was nothing different other than the version of laravel and vue that I used with the one in the video.

this is the video: User CRUD - Build an Advanced Blog/CMS (Episode 12).

in one episode, we started using vue, and I immediately got an error like this:

[Vue warn]: Property or method "autoPassword" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. (found in Root)

I don't understand what's happening, but this is the code:

app.js

require('./bootstrap');

window.Vue = require('vue');
import Buefy from 'buefy'

Vue.use(Buefy)

var app = new Vue({
  el: '#app'
});

layout.blade.php

<!DOCTYPE html>
<html>
  <head>
    @include('partials.meta-tags')
    <title>Dashboard | Bulma CMS</title>
    @include('partials.styles')
  </head>
  <body class="has-navbar-fixed-top">
    <div id="app">
      <header>
        @include('partials.nav.top')
        @include('partials.nav.side')
      </header>
      <main class="has-sidenav-fixed-left">
        <div class="p-4">
          @yield('content')
        </div>
      </main>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
  </body>
</html>

users/create.blade.php

@extends('layout')

@section('content')
  <div class="columns">
    <div class="column">
      <h1 class="title">Manage Users</h1>
      <form action="{{ route('users.store') }}" method="POST" autocomplete="off">
        @csrf
        <div class="field">
          <div class="control">
            <input type="text" name="name" placeholder="Name" class="input" required />
          </div>
        </div>
        <div class="field">
          <div class="control">
            <input type="email" name="email" placeholder="Email" class="input" required />
          </div>
        </div>
        <div class="field">
          <div class="control">
            <input type="password" name="password" placeholder="Password" class="input" :disabled="autoPassword" required />
          </div>
        </div>
        <div class="field">
          <div class="control">
            <b-checkbox name="auto_password" :checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button class="button">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        autoPassword: true
      }
    });
  </script>
@endsection

one more thing, I use buefy checkbox

<b-checkbox name="auto_password" :checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>

I added :checked="true" to be checked by default as in the video, but what I have is not checked by default.

can anyone help me?

Aren't you mounting Vue two times: var app = new Vue ? You should try moving the data part to app.js and removing @section('scripts') completely. — Andrius Rimkus

Aboalnaga Aboalnaga · Accepted Answer · 2018-09-15T17:12:05

First of all you should know that :checked is a short hand for v-bind:checked so you can't bind to true.

remove : to be:

<b-checkbox name="auto_password" checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>

Second you create two Vue instances one in app.js the other in users/create.blade.php.

The error you see because the first one in app.js doesn't have autoPassword.

Just remove these lines from app.js to get it to work hopefully:

var app = new Vue({
  el: '#app'
});

[Vue warn]:Property or method is not defined on the instance but referenced during render

2 Answers