在網易云課堂上上的網課，跟著敲了一段代碼，用的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/[email protected]"></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>
uj5u.com熱心網友回復：
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/[email protected]"></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>
uj5u.com熱心網友回復：
哦哦謝謝！！轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/27130.html
標籤：JavaScript
上一篇：周末的你喜歡做什么呢？
下一篇：406狀態碼的解決方式