Я использую laravel 5.7 и vue 2.5.7, я только что выучил vue.js несколько недель назад, я слежу за продвинутой серией блогов с использованием laravel и vue на youtube. Я думал, что правильно следовал тому, что было сделано в видео, не было ничего иного, кроме версии laravel и vue, которую я использовал с той, что в видео.
это видео: Пользователь CRUD - Создание расширенного блога / CMS (серия 12) .
в одном эпизоде мы начали использовать vue, и я сразу же получил ошибку, подобную этой:
[Vue warn]: свойство или метод "autoPassword" не определены в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. (найдено в 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>
Пользователи / 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" для проверки по умолчанию, как на видео, но то, что у меня есть, не проверено по умолчанию.
Кто-нибудь может мне помочь?