我收到此错误：未在实例上定义属性或方法“auto_password”，但在渲染期间引用答案

【问题标题】：I get this error: Property or method "auto_password" is not defined on the instance but referenced during render我收到此错误：未在实例上定义属性或方法“auto_password”，但在渲染期间引用
【发布时间】：2018-06-05 06:58:03
【问题描述】：

我正在 Laravel 视图中创建一个 Vue sn-p，当用户选中复选框时，它将禁用文本字段。但是我在控制台中收到此错误：

[Vue 警告]：属性或方法“auto_password”未在实例上定义，但在渲染期间被引用。确保此属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。

这是观点：

create.blade.php

@extends('layouts.manage')

@section('content')
<div class="flex-container">
    <div class="columns m-t-10">
        <div class="column">
            <h1 class="title">Create New User</h1>
        </div>

    </div>
    <hr class="m-t-0">
        <div class="columns">
            <div class="column">
                <form action="{{route('users.store')}}" method="POST">
                    {{csrf_field()}}
                    <div class="field">
                        <label for="name" class="label">Name</label>
                        <p class="control">
                            <input type="text" class="input" name="name" id="name">
                        </p>
                    </div>

                    <div class="field">
                        <label for="email" class="label">Email:</label>
                        <p class="control is-expanded">
                            <input type="text" class="input" name="email" id="email">
                        </p>
                    </div>

                    <div class="field">
                        <label for="password" class="label">Password</label>
                        <p class="control">
                            <input type="text" class="input" name="password" id="password" v-if="!auto_password">

                            <b-checkbox name="auto_generate"  class="m-t-15" v-model="auto_password">Auto Generate Password</b-checkbox>

                        </p>
                    </div>
                    <button class="button is-success">Create User</button>
                </form>
            </div>

        </div>
</div>{{-- end of .flex-container --}}
@endsection

@section('scripts')
<script>
    var app = new Vue({
        el: '#app',
        data: {
            auto_password: true

        },

    })
</script>
@endsection

layouts.manage

<!DOCTYPE html>
<html lang="{{ 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>AdBlog - Management</title>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@yield('styles')
</head>
<body>
@include('_includes.nav.main')
@include('_includes.nav.manage')

<div class ="management-area" id="app">
    @yield('content')
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('scripts')
</body>
</html>

我在这里错过了什么？

【问题讨论】：

v-model 不适用于组件b-checkbox，分享完整代码，或演示
就是完整的相关代码。我在 UI 中使用 Buefy (buefy.github.io)，因此使用了 b-checkbox 元素

标签： javascript vue.js vuejs2 blade laravel-blade

【解决方案1】：

从您的资产中的app.js 中删除这件作品：

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

【讨论】：