方法未定義

刪除的方法一直顯示未在實例中定義

盛夏黃昏

2019-03-20

源自：vue2.5入門 4-2

關(guān)注問題我要回答

742

操作

收起

1 回答

好吧真的不知道取什么名字
2019-03-21

你這個<list-item

????????? ?@delete="amputate"? ?這個@delete是子組件內(nèi)傳出的函數(shù)? methods: {

????????????????????????????????????????????????????????????????????????????????????????????????????????????子組件綁定刪除事件

????????????????????????????????????????????????????????????????????????????????????????????????????????????handerDetlete() {

????????????????????????????????????????????????????????????????????????????????????????????????????????? ??????this.$emit("delete", this.index);

????????????????????????????????????????????????????????????????????????????????????????????????????????????????其中“detele”是子組件傳遞給父組件的事件也就是綁定在 <list-item @delete="amputale" :index="index">中的 @delete監(jiān)聽事件

????????????????????????????????????????????????????????????????????????????????????????????????????????????????this.index是子組件傳遞給父組件的參數(shù)?

????????????????????????????????????????????????????????????????????????????????????????????????????????????}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

????????????>

父組件綁定（調(diào)用子組件刪除）

methods: {

? ? ?amputale(index) {

????????// index?是從?this.$emit("delete", this.index);?中 this.index傳出的值

????????this.list.splice(index, 1);

? ?}

}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

盛夏黃昏提問者

<template> <li @click="amputate">{{msg}}</li> </template> <script> export default { props:['msg', 'index'], methods:{ amputate(){ this.$emit('delete', this.index) } } } </script> 子組件是有amputate這個方法的但是就是這個方法未在實例中定義，但是在呈現(xiàn)期間引用了報的是這個錯

2019-03-21 回復(fù) 有任何疑惑可以回復(fù)我~

#2

盛夏黃昏提問者

報這樣的錯：屬性或方法“amputate”未在實例上定義，而是在呈現(xiàn)期間引用。通過初始化該屬性，確保該屬性在數(shù)據(jù)選項或基于類的組件中是響應(yīng)的

2019-03-21 回復(fù) 有任何疑惑可以回復(fù)我~

#3

好吧真的不知道取什么名字回復(fù) 盛夏黃昏提問者

那么你在父組件就應(yīng)該用 <list-item @delete="handerDelete" :index="index"></list-item> <script> export default { data() { return { list: [] } }, methods:{ handerDelete(index){ this.list.splice(index, 1); } } } </script>

2019-03-22 回復(fù) 有任何疑惑可以回復(fù)我~