laravel 控制台错误：[Vue 警告]：属性或方法未在实例上定义，但在渲染期间被引用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45473533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Console Errors: [Vue warn]: Property or method is not defined on the instance but referenced during render
提问by Chris WB
Firstly I'm Laravel Spark and have successfully integrated into the mix installation so my js is being deployed into app.js already
首先，我是 Laravel Spark 并且已成功集成到混合安装中，因此我的 js 已经部署到 app.js 中
I am getting errors when I setup a new component for a project;
为项目设置新组件时出现错误；
blade file
刀片文件
@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
and my js
还有我的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 = '';
},
}
});
The errors I'm getting in console;
我在控制台中遇到的错误；
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
I'm getting a sprintlist data fine but even without the text field and button I'm getting errors and my button method never hits.
我得到的 sprintlist 数据很好，但即使没有文本字段和按钮，我也会收到错误，我的按钮方法永远不会命中。
Any feedback would be greatly appreciated
任何反馈将不胜感激
Chris!
克里斯！
回答by Duy Anh
This type of warning is usually caused by a variable not being defined yet. (I know, not very helpful). What I mean:
这种类型的警告通常是由尚未定义的变量引起的。（我知道，不是很有帮助）。我的意思是：
- You passing a variable from one component A to another component B
- While a variable is still being passed (have not reached the desired component B), component B is already being mounted
- since a component B is already mounted, it is trying to use a variable that hasn't reached yet (ta da -> a warning)
- Then a variable reached, Vuejs reacted and updated the view accordingly
- 您将变量从一个组件 A 传递到另一个组件 B
- 当变量仍在传递时（尚未到达所需的组件 B），组件 B 已被安装
- 由于组件 B 已经安装，它正在尝试使用尚未到达的变量（ta da -> 警告）
- 然后到达一个变量，Vuejs 做出反应并相应地更新视图
This warning can be avoided by adding a v-ifto an element or a wrapper
可以通过向v-if元素或包装器添加 a来避免此警告
回答by MatWaligora
That's because you reference your data object properties and methods of a child component in parent component.
那是因为您在父组件中引用了子组件的数据对象属性和方法。
Move<input type="text" v-model="newSprint">
<button @click="addSprint">add</button>
移动<input type="text" v-model="newSprint">
<button @click="addSprint">add</button>
into your child component's template and you should be fine.
进入你的子组件的模板，你应该没问题。
回答by Chris WB
Ok I worked it out, I had tried to do what MatWaligora had suggested previously but the issue was I didn't realise I needed a single "parent" within the template. After I changed it to the below I got the functionality working. I'm still getting Vue warning messages as above but the page works.
好的，我解决了，我曾尝试按照 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>
