Tout d'abord, je suis Laravel Spark et j'ai intégré avec succès l'installation de mix afin que mon js soit déjà déployé dans app.js

J'obtiens des erreurs lorsque j'installe un nouveau composant pour un projet;

Fichier de lame

@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

Et mes 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 = '';


        },


    }


});

Les erreurs que j'obtiens dans la console;

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

J'obtiens des données de sprintlist bien, mais même sans le champ de texte et le bouton, j'obtiens des erreurs et ma méthode de bouton ne fonctionne jamais.

Tous commentaires serait grandement apprécié

Chris!

0
Chris WB 3 août 2017 à 04:50

2 réponses

Meilleure réponse

Ce type d'avertissement est généralement causé par une variable qui n'est pas encore définie . (Je sais, pas très utile). Ce que je veux dire:

  1. Vous passez une variable d'un composant A à un autre composant B
  2. Alors qu'une variable est encore en cours de transmission (n'ont pas atteint le composant B souhaité), le composant B est déjà en cours de montage
  3. puisqu'un composant B est déjà monté, il essaie d'utiliser une variable qui n'a pas encore atteint (ta da -> un avertissement)
  4. Puis une variable atteinte, Vuejs a réagi et mis à jour la vue en conséquence

Cet avertissement peut être évité en ajoutant un v-if à un élément ou à un wrapper

2
Duy Anh 3 août 2017 à 08:34

Ok, j'ai travaillé, j'avais essayé de faire ce que MatWaligora avait suggéré précédemment mais le problème était que je ne réalisais pas que j'avais besoin d'un seul "parent" dans le modèle. Après l'avoir changé pour le ci-dessous, j'ai fait fonctionner la fonctionnalité. Je reçois toujours des messages d'avertissement Vue comme ci-dessus mais la page fonctionne.

<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>
0
Chris WB 3 août 2017 à 06:15