求助！请问为什么delItem会显示is not defined呢，这不是内置方法吗，checkedItem方法就没有报错

猫吃全麦饼干 2020-07-21 11:27:13

在网易云课堂上上的网课，跟着敲了一段代码，用的script标签引入的vue，跟网课上都是一样的，可是控制台报错delItem is not defined，请问怎么改啊？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
[v-cloak]
{
display: none;
}
. list{width: 600px;height: 25px;margin-bottom: 10px}
. list. active{background-color: aquamarine;color: royalblue}
</style>
</head>
<body>
<div id = "app" v-cloak>
<ul>
<li :class="{list:true,active:item.active}" v-for="(item,index) in list" :key="index"
@click="checkedItem(index)">{{item.name}}-<button type="button" @click="delItem(index)">删除</button></li>
</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
new Vue({
el:"#app",
data()
{
return{
list:[
{id:1,name:"张三",age:28,active:false},
{id:2,name:"李四",age:18,active:false},
{id:3,name:"王五",age:38,active:false}
]
}
},
methods:{
checkedItem(index)
{
//console.log(index);
this.list[index].active=!this.list[index].active;
}
},
delItem(index) {
this.list.splice(index,1);
}
}

)
</script>
</body>
</html>

...全文

754 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

foreverpx 2020-07-21

打赏
举报

delItem要写在method里面，代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <style> [v-cloak] { display: none; } . list{width: 600px;height: 25px;margin-bottom: 10px} . list. active{background-color: aquamarine;color: royalblue} </style> </head> <body> <div id = "app" v-cloak> <ul> <li :class="{list:true,active:item.active}" v-for="(item,index) in list" :key="index" @click="checkedItem(index)">{{item.name}}-<button type="button" @click="delItem(index)">删除</button></li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> new Vue({ el:"#app", data() { return{ list:[ {id:1,name:"张三",age:28,active:false}, {id:2,name:"李四",age:18,active:false}, {id:3,name:"王五",age:38,active:false} ] } }, methods:{ checkedItem(index) { //console.log(index); this.list[index].active=!this.list[index].active; }, delItem(index) { this.list.splice(index,1); } } } ) </script> </body> </html>

猫吃全麦饼干 2020-07-21