Laravel 控制台错误：[Vue warn]：未在实例上定义属性或方法，但在渲染期间引用了该属性或方法

首先，我是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

我在控制台中遇到的错误

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

app.js:42229[Vue warn]：属性或方法“newSprint”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。
（位于）
warn@app.js:42229
app.js:42229[Vue warn]：属性或方法“addSprint”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。
（位于）
warn@app.js:42229
app.js:42229[Vue warn]：属性或方法“sprintlist”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。
（位于）
warn@app.js:42229
app.js:42229[Vue warn]：事件“click”的处理程序无效：未定义

我得到的sprintlist数据很好，但即使没有文本字段和按钮，我也会出现错误，我的按钮方法永远不会成功

如有任何反馈，将不胜感激

---

克里斯

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

移动

添加

---

在子组件的模板中，您应该不会有问题。

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

移动

添加

---

在您的子组件的模板中，您应该很好。

好的，我已经解决了，我已经尝试按照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>

添加

好吧，我已经想好了，我试着按照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>

添加

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

将变量从一个组件a传递到另一个组件B

当变量仍在传递时（未达到所需的组件B），组件B已安装

由于组件B已经安装，它试图使用尚未达到的变量（ta da->a警告）

然后到达一个变量，Vuejs作出反应并相应地更新视图

---

可以通过向元素或包装添加

v-if

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

将变量从一个组件a传递到另一个组件B

当变量仍在传递时（未达到所需的组件B），组件B已安装

由于组件B已经安装，它试图使用尚未达到的变量（ta da->a警告）

然后到达一个变量，Vuejs作出反应并相应地更新视图

---

通过向元素或包装添加

v-if

，可以避免此警告。对我来说，这是循环中的一个额外结束标记

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

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

    </div> // <- the issue

</div>

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

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

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

    </div> // <- the issue

</div>


//