Question

我使用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”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。（位于Root中）

我不知道发生了什么，但这是代码：

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"，就像视频中的默认设置一样，但是默认情况下我没有选中。

有人可以帮助我吗？

Answer 1

您正在创建2个Vue实例。
app.js中的一位，users/create.blade.php中的一位。

删除app.js中的一个，它应该可以正常工作。

Answer 2

首先，您应该知道: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 个答案: