Vue: [Vue warn]: Property or method "index" is not defined on the instance but referenced during render.

Created on 27 Sep 2016 · 3Comments · Source: vuejs/vue

Vue.js version

2.0.0-rc.7

What is actually happening?

I'm trying to change my 1.x vue project to 2.0.0,but got a warn

main.js:20715 [Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )

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>

What should I do to remove this warn?

need repro

Source

Vwings

Most helpful comment

Finally I found the problem.I forgot to change the original code to

(tab,index)

in another file

warn:

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

no warn:

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

Vwings on 28 Sep 2016

👍15 🎉2 ❤1

All 3 comments

Finally I found the problem.I forgot to change the original code to

(tab,index)

in another file

warn:

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

no warn:

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

Vwings on 28 Sep 2016

👍15 🎉2 ❤1

First forgive me for this post, but i'm going through a similar situation..

Vue.js version
2.1.6

Vuex.js version
2.1.1

my file actions.js

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

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

and my component.vue

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

this is the result

vue.common.js?e881:519[Vue warn]: Property or method "addForm" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
vue.common.js?e881:519 [Vue warn]: Property or method "deleteForm" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

What should I do to correct this warning?

carvalhoviniciusluiz on 28 Dec 2016

@carvalhoviniciusluiz You shouldn't be defining actions on a component, please refer to: http://vuex.vuejs.org/en/actions.html#dispatching-actions-in-components