[Vue 警告]：属性或方法未在实例上定义，但在渲染期间引用
Posted
技术标签:
【中文标题】[Vue 警告]：属性或方法未在实例上定义，但在渲染期间引用【英文标题】：[Vue warn]:Property or method is not defined on the instance but referenced during render 【发布时间】：2019-02-20 03:14:21 【问题描述】：我使用 laravel 5.7 和 vue 2.5.7，几周前我刚刚学习了 vue.js，我正在关注一个高级系列，在 youtube 上使用 laravel 和 vue 制作博客。我以为我正确地遵循了视频中的操作，除了我在视频中使用的 laravel 和 vue 版本之外没有什么不同。
这是视频：User CRUD - Build an Advanced Blog/CMS (Episode 12)。
在一集中，我们开始使用vue，我立即收到这样的错误：
[Vue 警告]：属性或方法“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>
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
还有一件事，我使用 buefy 复选框
<b-checkbox name="auto_password" :checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>
我在视频中添加了:checked="true"作为默认检查，但默认情况下我没有检查。
谁能帮帮我？
【问题讨论】：
你不是安装了两次 Vue：var app = new Vue 吗？您应该尝试将 data 部分移动到 app.js 并完全删除 @section('scripts')。
【参考方案1】：
首先你应该知道:checked是v-bind:checked的简写，所以你不能绑定到true。
将: 删除为：
<b-checkbox name="auto_password" checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>
其次，您创建两个Vue 实例，一个在app.js 中，另一个在users/create.blade.php 中。
您看到的错误是因为app.js 中的第一个没有autoPassword。
只需从 app.js 中删除这些行，即可让它正常工作：
var app = new Vue(
el: '#app'
);
【讨论】：
我遇到了同样的错误。您的解决方案说明了错误的原因以及如何正确实施。谢谢！【参考方案2】：您正在创建 2 个 Vue 实例。
一个在app.js，一个在users/create.blade.php。
删除app.js 中的那个，它应该可以正常工作。
【讨论】：
以上是关于[Vue 警告]：属性或方法未在实例上定义，但在渲染期间引用的主要内容，如果未能解决你的问题，请参考以下文章
Vue警告]：属性或方法“选项”未在实例上定义，但在render.Vue js问题期间引用
为啥我看到 Vue 警告：“属性或方法“msg”未在实例上定义，但在渲染期间被引用...”
[Vue 警告]：属性或方法“游戏”未在实例上定义，但在渲染期间引用
[Vue 警告]：属性或方法未在实例上定义，但在渲染期间引用