Ошибки консоли: [Vue warn]: свойство или метод не определены в экземпляре, но на них ссылаются во время рендеринга

Question

Во-первых, я 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

и мой 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

Я получаю данные списка спринта нормально, но даже без текстового поля и кнопки я получаю ошибки, и мой метод кнопки никогда не срабатывает.

Любая обратная связь будет принята с благодарностью

Крис!

Answer 1

Этот тип предупреждения обычно вызван тем, что переменная еще не определена. (Я знаю, не очень полезно). Что я имею в виду:

1. Вы передаете переменную из одного компонента A в другой компонент B
2. Пока переменная все еще передается (не достигли нужного компонента B), компонент B уже монтируется
3. так как компонент B уже смонтирован, он пытается использовать переменную, которая еще не достигла (та да -> предупреждение)
4. Затем переменная достигла, Vuejs отреагировал и обновил представление соответственно

Это предупреждение можно избежать, добавив v-if элементу или обертке

Answer 2

Хорошо, я решил это, я пытался сделать то, что предлагал 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>

Answer 3

Для меня это был лишний закрывающий тег в цикле.

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

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

    </div> // <- the issue

</div>

Дважды проверьте все теги, если другие ответы вам не помогли.

Answer 4

Это потому, что вы ссылаетесь на свойства и методы объекта данных дочернего компонента в родительском компоненте.

Переехать
<input type="text" v-model="newSprint"> <button @click="addSprint">add</button>

в шаблон вашего дочернего компонента, и вы должны быть в порядке.