控制台错误:[Vue 警告]:属性或方法未在实例上定义,但在渲染期间引用
Posted
技术标签:
【中文标题】控制台错误:[Vue 警告]:属性或方法未在实例上定义,但在渲染期间引用【英文标题】:Console Errors: [Vue warn]: Property or method is not defined on the instance but referenced during render 【发布时间】:2018-01-10 10:17:06 【问题描述】:首先我是 Laravel Spark 并且已经成功集成到 mix 安装中,所以我的 js 已经部署到 app.js 中了
我在为项目设置新组件时遇到错误;
刀片文件
@extends('spark::layouts.app')
@section('content')
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Sprints</div>
<div class="panel-body">
<os-sprints></os-sprints>
<input type="text" v-model="newSprint">
<button @click="addSprint">add</button>
</div>
</div>
</div>
</div>
</div>
<template id="my-sprints">
<ul class="list-group">
<li class="list-group-item" v-for="sprint in sprintlist">
<a :href="'/sprints/' + sprint.id">@ sprint.title @ sprint.id </a>
</li>
</ul>
</template>
@endsection
还有我的 js
Vue.component('os-sprints',
template: '#my-sprints',
data()
return
sprintlist: [],
newSprint: ''
;
,
created()
this.getSprints();
,
methods:
getSprints()
axios.get ('/api/team/sprints')
.then(response =>
this.sprintlist = response.data;
);
,
addSprint()
alert("hit");
// this.sprintlist.push(this.newSprintname);
// this.newSprintname = '';
,
);
我在控制台中遇到的错误;
app.js:42229 [Vue warn]: Property or method "newSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Property or method "addSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Property or method "sprintlist" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Invalid handler for event "click": got undefined
我得到了一个 sprintlist 数据,但即使没有文本字段和按钮,我也会遇到错误,而且我的按钮方法永远不会命中。
任何反馈将不胜感激
克里斯!
【问题讨论】:
【参考方案1】:这种类型的警告通常是由尚未定义的变量引起的。 (我知道,不是很有帮助)。我的意思:
-
您将变量从一个组件 A 传递到另一个组件 B
虽然仍在传递变量(尚未到达所需的组件 B),但组件 B 已被挂载
由于组件 B 已安装,它正在尝试使用尚未到达的变量(ta da -> 警告)
然后到达一个变量,Vuejs 做出反应并相应地更新了视图
可以通过将v-if
添加到元素或包装器来避免此警告
【讨论】:
【参考方案2】:那是因为你在父组件中引用了你的数据对象属性和子组件的方法。
移动<input type="text" v-model="newSprint">
<button @click="addSprint">add</button>
进入你的子组件的模板,你应该没问题。
【讨论】:
【参考方案3】:好的,我解决了,我曾尝试按照 MatWaligora 之前的建议进行操作,但问题是我没有意识到我需要在模板中添加一个“父级”。将其更改为以下内容后,我的功能正常工作。我仍然收到如上所述的 Vue 警告消息,但页面可以正常工作。
<template id="my-sprints">
<div>
<ul class="list-group">
<li class="list-group-item" v-for="sprint in sprintlist">
<a :href="'/sprints/' + sprint.id">@ sprint.title @ sprint.id </a>
</li>
</ul>
<input type="text" id="sprinttext" v-model="newSprint">
<button @click="addSprint">add</button>
</div>
</template>
【讨论】:
【参考方案4】:对我来说,这是循环中的一个额外的结束标记。
<div v-for="(item, index) in items" :key="index">
<a :href="item.url"> item.name </a>
</div> // <- the issue
</div>
如果其他答案对您没有帮助,请仔细检查所有标签。
【讨论】:
以上是关于控制台错误:[Vue 警告]:属性或方法未在实例上定义,但在渲染期间引用的主要内容,如果未能解决你的问题,请参考以下文章
错误:vue.js:634 [Vue 警告]:属性或方法“项目”未在实例上定义,但在渲染期间被引用
[Vue 警告]:属性或方法“v”未在实例上定义,但在渲染期间被引用
Vue警告:属性或方法“item”未在实例上定义,但在渲染期间被引用
Vue js错误:属性或方法“smoothie”未在实例上定义,但在渲染期间引用