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

[Vwings]

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?

[Vwings]

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>

[carvalhoviniciusluiz]

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>
<script type="text/javascript">
    import { addForm, deleteForm } from './vuex/actions'
    export default {
        actions: {
          addForm,
          deleteForm
        }
    }
</script>

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?

[fnlctrl]

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

[Matthew2306]

Warn: [Vue warn]: Property "shows" was accessed during render but is not defined on instance.

I have a similar situation, could anyone tell how can I fix the v-for loop?

Design:

Template:

<div class="show-column">
  <div class="circle-bg">
    <div class="date">{{ show.date }}</div>
    <div class="month">{{ show.month }}</div>
  </div>

  <div class="show show-box">
    <div class="show-name">{{ show.showName }}</div>
    <div class="show-desc">{{ show.showDesc }}</div>
  </div>
</div>

Script:

const activeIndex = ref(0);
const shows = ref([
  {
    date: "15",
    month: "JUN",
    showName: "Piano Duo Recital by Lucas & Arthur Jussen",
    showDesc: "Hong Kong Museum of Art",
  },
  {
    date: "15-18",
    month: "JUN",
    showName:
      "Chinese Opera Festival 2023: Opening Programme - Peking Opera Theatre of Beijing",
    showDesc: "Hong Kong Museum of Art",
  },
  {
    date: "15-30",
    month: "JUN JUL",
    showName: "Chinese Culture and Dance Festival 'Hong Kong Dance Expo 2023'",
    showDesc: "Hong Kong Museum of Art",
  },
  {
    date: "30",
    month: "JUN",
    showName: "4",
    showDesc: "Test",
  },
]);