Vue: [Vue warn]: la propiedad o el método "índice" no está definido en la instancia, pero se hace referencia a él durante el procesamiento.

Creado en 27 sept. 2016 · 3Comentarios · Fuente: vuejs/vue

Versión de Vue.js

2.0.0-rc.7

¿Qué está pasando realmente?

Estoy tratando de cambiar mi proyecto 1.x vue a 2.0.0, pero recibí una advertencia

main.js: 20715 [Vue warn]: la propiedad o método "índice" no está definido en la instancia, pero se hace referencia a él durante el procesamiento. Asegúrese de declarar las propiedades de los datos reactivos en la opción de datos. (encontrado en 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>

¿Qué debo hacer para eliminar esta advertencia?

need repro

Fuente

Vwings

Comentario más útil

Finalmente encontré el problema Olvidé cambiar el código original a

(pestaña, índice)

en otro archivo

advertir:

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

no advertir:

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

Vwings en 28 sept. 2016

👍15 🎉2 ❤1

Todos 3 comentarios

Finalmente encontré el problema Olvidé cambiar el código original a

(pestaña, índice)

en otro archivo

advertir:

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

no advertir:

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

Vwings en 28 sept. 2016

👍15 🎉2 ❤1

Primero perdóname por esta publicación, pero estoy pasando por una situación similar ...

Versión de Vue.js
2.1.6

Versión de Vuex.js
2.1.1

mi archivo actions.js

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

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

y mi componente.vue

 <plantilla>
 <ul class = "menú desplegable">
 <li>
 <a @ click = "addForm"> guardar </ a> 
 </ li>
 <li>
 <a @ click = "deleteForm"> eliminar </ a>
 </ li>
 </ ul>
 </ plantilla>

este es el resultado

vue.common.js? e881: 519 [Vue warn]: la propiedad o método "addForm" no está definido en la instancia, pero se hace referencia a él durante el procesamiento. Asegúrese de declarar las propiedades de los datos reactivos en la opción de datos.
vue.common.js? e881: 519 [Vue warn]: la propiedad o método "deleteForm" no está definido en la instancia, pero se hace referencia a él durante el procesamiento. Asegúrese de declarar las propiedades de los datos reactivos en la opción de datos.

¿Qué debo hacer para corregir esta advertencia?

carvalhoviniciusluiz en 28 dic. 2016

@carvalhoviniciusluiz No debería definir actions en un componente, consulte: http://vuex.vuejs.org/en/actions.html#dispatching -actions-in-components