个人中心
gpt4 book ai didi

javascript - [Vue警告] :Property or method is not defined on the instance but referenced during render

转载 作者：行者123 更新时间：2023-12-03 01:07:05 24 4
gpt4 key购买 nike

我使用 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 warn]: Property or method "autoPassword" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. (found in 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" 来默认检查，如视频中所示，但我所拥有的默认情况下不检查。

谁能帮我吗？

最佳答案

首先你应该知道 :checked 是 v-bind:checked 的简写，所以你不能绑定(bind)到 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'
});

关于javascript - [Vue警告] :Property or method is not defined on the instance but referenced during render，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52346677/

24 4 0
文章推荐： .net - 如何在 Azure 应用程序中使用 MSMQ
文章推荐： javascript - 在 JavaScript 中从数组中过滤 null
文章推荐： Azure 函数 - 'AzureWebJobsServiceBusConnectionString' 丢失
文章推荐： Javascript:捕获鼠标滚轮事件并且不滚动页面？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com