控制台错误：[Vue公司提醒]：属性或方法未在实例中定义，但在引用渲染

Question

首先我Laravel Spark和已经成功地集成到混合安装，这样我的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数据不错，但即使没有文本字段和按钮，我得到的错误，我的按钮方法嗟。

任何反馈将不胜感激

克里斯！

Answer 1

这种类型的警告的通常是由不被限定还可变引起的。 （我知道，不是很有帮助）。我的意思是什么：

1. 你传递一个变量从一个组件到另一个组分B
2. 虽然仍然被传递一个变量（还没有达到所需的组分B），成分B已经安装
3. 因为组分B已经安装，则尝试使用还没有达到一个变量（ただ - >警告）
4. 然后达到一个变量，Vuejs反应和更新视图相应

可以通过添加到v-if的元件或一个包装来避免此警告

Answer 2

那是因为你引用您的数据对象的属性和在父组件的子组件的方法。

移动
<input type="text" v-model="newSprint"> <button @click="addSprint">add</button>

到您的子组件的模板，你应该罚款。

Answer 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>