Vue: [Vue warn]: A propriedade ou método "index" não é definido na instância, mas referenciado durante a renderização.

Criado em 27 set. 2016 · 3Comentários · Fonte: vuejs/vue

Versão Vue.js

2.0.0-rc.7

O que realmente está acontecendo?

Estou tentando mudar meu projeto 1.x vue para 2.0.0, mas recebi um aviso

main.js: 20715 [Vue warn]: A propriedade ou método "index" não é definido na instância, mas referenciado durante a renderização. Certifique-se de declarar propriedades de dados reativos na opção de dados. (encontrado no componente)

código:

<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>

O que devo fazer para remover este aviso?

need repro

Fonte

Vwings

Comentários muito úteis

Finalmente encontrei o problema. Esqueci-me de alterar o código original para

(guia, índice)

em outro arquivo

avisar:

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

sem avisar:

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

Vwings em 28 set. 2016

👍15 🎉2 ❤1

Todos 3 comentários

Finalmente encontrei o problema. Esqueci-me de alterar o código original para

(guia, índice)

em outro arquivo

avisar:

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

sem avisar:

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

Vwings em 28 set. 2016

👍15 🎉2 ❤1

Primeiramente me perdoe por esta postagem, mas estou passando por uma situação parecida ..

Versão Vue.js
2.1.6

Versão Vuex.js
2.1.1

meu arquivo actions.js

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

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

e meu component.vue

 <template>
 <ul class = "dropdown-menu">
 <li>
 <a @ click = "addForm"> salvar </ a> 
 </ li>
 <li>
 <a @ click = "deleteForm"> excluir </ a>
 </ li>
 </ ul>
 </ template>

este é o resultado

vue.common.js? e881: 519 [Vue warn]: A propriedade ou método "addForm" não é definido na instância, mas referenciado durante a renderização. Certifique-se de declarar propriedades de dados reativos na opção de dados.
vue.common.js? e881: 519 [Vue warn]: A propriedade ou método "deleteForm" não é definido na instância, mas referenciado durante a renderização. Certifique-se de declarar propriedades de dados reativos na opção de dados.

O que devo fazer para corrigir esse aviso?

carvalhoviniciusluiz em 28 dez. 2016

@carvalhoviniciusluiz Você não deveria definir actions em um componente, consulte: http://vuex.vuejs.org/en/actions.html#dispatching -actions-in-components