Vue: [Vue warn] : La propriété ou la méthode "index" n'est pas définie sur l'instance mais référencée lors du rendu.

Créé le 27 sept. 2016 · 3Commentaires · Source: vuejs/vue

Version de vue.js

2.0.0-rc.7

Que se passe-t-il réellement ?

J'essaie de changer mon projet de vue 1.x en 2.0.0, mais j'ai reçu un avertissement

main.js:20715 [Vue warn] : La propriété ou la méthode "index" n'est pas définie sur l'instance mais référencée lors du rendu. Assurez-vous de déclarer les propriétés de données réactives dans l'option de données. (trouvé dans le composant)

code:

<template>
<div>
...
<a class="ui red label " v-for="(tag,index) in tags">
       {{tag}}
       <i class="delete icon" v-on:click="deleteTag(index)"></i>
 </a>
...
</div>
<template>
<script>

    module.exports = {
        data : function () {
            return {
                //form tags
                tags:[],
            }
        },
        methods : {

            deleteTag : function (deleteIndex) {
                this.tags.splice(deleteIndex,1);
            }
        }

    }

</script>

Que dois-je faire pour supprimer cet avertissement ?

need repro

Source

Vwings

Commentaire le plus utile

Enfin, j'ai trouvé le problème. J'ai oublié de changer le code d'origine en

(onglet, index)

dans un autre fichier

avertir:

<a class="item" v-for="tab in tabs" :class="{active : activeTab==index}" @click="toggleActiveTab(index)">
            {{tab.name}}
        </a>

non avertir :

<a class="item" v-for="(tab,index) in tabs" :class="{active : activeTab==index}" @click="toggleActiveTab(index)">
            {{tab.name}}
        </a>

Vwings le 28 sept. 2016

👍15 🎉2 ❤1

Tous les 3 commentaires

Enfin, j'ai trouvé le problème. J'ai oublié de changer le code d'origine en

(onglet, index)

dans un autre fichier

avertir:

<a class="item" v-for="tab in tabs" :class="{active : activeTab==index}" @click="toggleActiveTab(index)">
            {{tab.name}}
        </a>

non avertir :

<a class="item" v-for="(tab,index) in tabs" :class="{active : activeTab==index}" @click="toggleActiveTab(index)">
            {{tab.name}}
        </a>

Vwings le 28 sept. 2016

👍15 🎉2 ❤1

Excusez-moi d'abord pour ce post, mais je vis une situation similaire..

Version de vue.js
2.1.6

Version Vuex.js
2.1.1

mon fichier actions.js

 export const addForm = ({ dispatch }) => {
 dispatch('ADD_FORM')
 }

 export const deleteForm = ({ dispatch }) => {
 dispatch('DELETE_FORM')
 }

et mon component.vue

 < modèle>
 < ul class="menu déroulant">
 <li>
 <a @click="addForm"> enregistrer< /a> 
 < /li>
 <li>
 < a @click="deleteForm"> supprimer< /a>
 < /li>
 < /ul>
 < /modèle>

c'est le résultat

vue.common.js?e881:519[Vue warn] : La propriété ou la méthode "addForm" n'est pas définie sur l'instance mais référencée lors du rendu. Assurez-vous de déclarer les propriétés de données réactives dans l'option de données.
vue.common.js?e881:519 [Vue warn] : La propriété ou la méthode "deleteForm" n'est pas définie sur l'instance mais référencée lors du rendu. Assurez-vous de déclarer les propriétés de données réactives dans l'option de données.

Que dois-je faire pour corriger cet avertissement ?

carvalhoviniciusluiz le 28 déc. 2016

@carvalhoviniciusluiz Vous ne devriez pas définir actions sur un composant, veuillez vous référer à : http://vuex.vuejs.org/en/actions.html#dispatching -actions-in-components