[Vue warn] :속성 또는 메서드가 인스턴스에서 정의되지 않았지만 렌더링 중에 참조됩니다.
저는 larabel 5.7과 vue 2.5.7을 사용하고 있습니다.vue.js는 몇 주 전에 배운 지 얼마 안 되어 고급 시리즈를 따라 유튜브에 larabel과 vue를 사용하여 블로그를 만들고 있습니다.동영상에 나온 것을 제대로 따랐다고 생각했습니다만, 동영상과 함께 사용한 라라벨과 vue 버전 이외에는 다른 것이 없었습니다.
다음은 비디오입니다.사용자 CRUD - 고급 블로그/CMS 구축(Episode 12).
어떤 에피소드에서 vue를 사용하기 시작했는데 바로 다음과 같은 오류가 발생했습니다.
[Vue warn] :속성 또는 메서드 "autoPassword"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.속성을 초기화하여 데이터 옵션 또는 클래스 기반 구성 요소에서 이 속성이 반응하는지 확인하십시오(루트에 있음).
무슨 일이 일어나고 있는지는 모르겠지만, 암호는 다음과 같습니다.
app.module
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>
사용자/작성.blade.displaces
@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에 얽매일 수 없다.true.
제거한다.:대상:
<b-checkbox name="auto_password" checked="true" v-model="autoPassword">Auto Generate Password</b-checkbox>
두 번째는 2개의Vue의 인스턴스 1app.js에 있어서의 다른 쪽users/create.blade.php.
에러가 표시되는 것은, 의 첫 번째 에 있기 때문입니다.app.js없다autoPassword.
이 행을 에서 삭제해 주세요.app.js희망적으로 작동시키는 방법:
var app = new Vue({
el: '#app'
});
2개의 Vue 인스턴스를 생성하고 있습니다.
원인app.js그리고 하나 인users/create.blade.php.
에 있는 것을 떼어냅니다.app.js잘 될 거야
언급URL : https://stackoverflow.com/questions/52346677/vue-warnproperty-or-method-is-not-defined-on-the-instance-but-referenced-duri
'programing' 카테고리의 다른 글
| Java에서 바이트 배열을 정수로 변환하거나 그 반대로 변환합니다. (0) | 2022.08.18 |
|---|---|
| malloc/free/new/delete에서 컴파일러가 메모리를 0xCD, 0xDD 등으로 초기화하는 시기와 이유는 무엇입니까? (0) | 2022.08.18 |
| 인수가 있는 Vuex 매핑 Getter - 캐시됨? (0) | 2022.08.18 |
| C에서 함수를 매개 변수로 전달하려면 어떻게 해야 합니까? (0) | 2022.08.18 |
| 프로그램 내비게이션이 있는 패스 소품 Vue.js (0) | 2022.08.18 |