Javascript [Vue warn]：属性或方法未在实例上定义，但在渲染期间被引用_Javascript_Php_Laravel_Vue.js_Vuejs2

Javascript [Vue warn]：属性或方法未在实例上定义，但在渲染期间被引用

javascript php laravel vue.js vuejs2

Javascript [Vue warn]：属性或方法未在实例上定义，但在渲染期间被引用,javascript,php,laravel,vue.js,vuejs2,Javascript,Php,Laravel,Vue.js,Vuejs2,我使用的是laravel 5.7和vue 2.5.7，几周前我刚刚学习了vue.js，我正在关注一个高级系列，在youtube上使用laravel和vue制作博客。我认为我已经正确地遵循了视频中的操作，除了我在视频中使用的laravel和vue版本之外，没有什么不同这是视频：在一集中，我们开始使用vue，我立即遇到如下错误： [Vue warn]：属性或方法“autoPassword”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。（在根

我使用的是laravel 5.7和vue 2.5.7，几周前我刚刚学习了vue.js，我正在关注一个高级系列，在youtube上使用laravel和vue制作博客。我认为我已经正确地遵循了视频中的操作，除了我在视频中使用的laravel和vue版本之外，没有什么不同

这是视频：

在一集中，我们开始使用vue，我立即遇到如下错误：

[Vue warn]：属性或方法“autoPassword”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。（在根目录中找到）

我不明白发生了什么，但代码如下：

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>

@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


@include（'partials.meta标记'）
仪表板| Bulma CMS
@包括（'partials.style'）
@包括（'partials.nav.top'）
@包括（'partials.nav.side'）
@产量（‘含量’）
@产量（'脚本'）

users/create.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>

@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

@extends（'layout'））
@节（“内容”）
管理用户
@csrf
自动生成密码
提交
@端部
@节（“脚本”）
var app=新的Vue({
el:“#应用程序”，
数据：{
自动密码：对
}
});
@端部

还有一件事，我使用buefy复选框

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

自动生成密码

我在视频中添加了默认选中的

：checked=“true”

，但是默认情况下我没有选中

有人能帮我吗？

您正在创建2个Vue实例。
一个在

app.js

中，一个在

users/create.blade.php

中

删除

app.js中的一个，它应该可以正常工作。
首先，你应该知道:checked
是v-bind:checked
的缩写，所以你不能绑定到true

将：
删除为：
<b-checkbox name="auto_password" checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>

您不是安装了两次Vue吗：var-app=new-Vue
？您应该尝试将数据部分移动到app.js并完全删除@部分（“脚本”）
。我也有同样的错误。您的解决方案说明了错误的原因以及如何正确实施。谢谢