控制台错误：[Vue warn]: 属性 or method is not defined on the instance but referenced during render

Question

首先，我是 Laravel Spark 并已成功集成到混合安装中，因此我的 js 已经部署到 app.js

我在为项目设置新组件时遇到错误；

blade 文件

@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

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

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

进入你的子组件的模板，你应该没问题。

Answer 2

好的，我解决了，我曾尝试按照 MatWaligora 之前的建议进行操作，但问题是我没有意识到我需要模板中的单个 "parent"。在我将它更改为下面之后，我的功能开始工作了。我仍然收到如上所述的 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>

Answer 3

此类警告通常是由于尚未定义变量引起的。（我知道，不是很有帮助）。我的意思是：

您将变量从一个组件 A 传递到另一个组件 B
变量还在传递中（还没有到达想要的组件B），组件B已经挂载了
由于组件 B 已经安装，它正在尝试使用尚未达到的变量（ta da -> 警告）
然后到达一个变量，Vuejs做出反应并相应地更新视图

可以通过向元素或包装器添加 v-if 来避免此警告

Answer 4

对我来说，这是循环中的额外结束标记。

<div v-for="(item, index) in items" :key="index">

    <a :href="item.url">{{ item.name }} </a>

    </div> // <- the issue

</div>

如果其他答案对您没有帮助，请仔细检查所有标签。

控制台错误：[Vue warn]: 属性 or method is not defined on the instance but referenced during render

Console Errors: [Vue warn]: Property or method is not defined on the instance but referenced during render

laravel

laravel-spark

vue-component

vuejs2