Vue: [Предупреждение Vue]: свойство или метод "index" не определено в экземпляре, но на него ссылаются во время рендеринга.

Созданный на 27 сент. 2016 · 3Комментарии · Источник: vuejs/vue

Версия Vue.js

2.0.0-rc.7

Что на самом деле происходит?

Я пытаюсь изменить свой проект 1.x vue на 2.0.0, но получил предупреждение

main.js: 20715 [предупреждение Vue]: свойство или метод "index" не определены в экземпляре, но на них ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных. (находится в компоненте)

код:

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

Что мне делать, чтобы удалить это предупреждение?

need repro

Источник

Vwings

Самый полезный комментарий

Наконец я нашел проблему. Я забыл изменить исходный код на

(вкладка, указатель)

в другом файле

предупреждать:

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

не предупреждать:

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

Vwings 28 сент. 2016

👍15 🎉2 ❤1

Все 3 Комментарий

Наконец я нашел проблему. Я забыл изменить исходный код на

(вкладка, указатель)

в другом файле

предупреждать:

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

не предупреждать:

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

Vwings 28 сент. 2016

👍15 🎉2 ❤1

Во-первых, простите меня за этот пост, но у меня похожая ситуация ...

Версия Vue.js
2.1.6

Версия Vuex.js
2.1.1

мой файл actions.js

 export const addForm = ({dispatch}) => {
 отправка ('ADD_FORM')
 }

 export const deleteForm = ({dispatch}) => {
 отправка ('DELETE_FORM')
 }

и мой component.vue

 <шаблон>
 <ul class = "dropdown-menu">
 <li>
 <a @ click = "addForm"> сохранить </ a> 
 </ li>
 <li>
 <a @ click = "deleteForm"> удалить </ a>
 </ li>
 </ ul>
 </ шаблон>

это результат

vue.common.js? e881: 519 [Предупреждение Vue]: свойство или метод «addForm» не определены в экземпляре, но на них ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных.
vue.common.js? e881: 519 [Предупреждение Vue]: свойство или метод «deleteForm» не определены в экземпляре, но на них ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных.

Что мне делать, чтобы исправить это предупреждение?

carvalhoviniciusluiz 28 дек. 2016

@carvalhoviniciusluiz Вы не должны определять actions для компонента, обратитесь к: http://vuex.vuejs.org/en/actions.html#dispatching -actions-in-components