87,984
社区成员
发帖
与我相关
我的任务
分享求助！请问为什么delItem会显示is not defined呢，这不是内置方法吗，checkedItem方法就没有报错
在网易云课堂上上的网课，跟着敲了一段代码，用的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>
<!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>
...全文
请发表友善的回复…
发表回复
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
- 打赏
- 举报
哦哦谢谢！！
