控制檯錯誤：[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>