For help! Excuse me why delItem displays is not defined, this is not a built-in method, checkedItem-CodePudding

In classroom and online classes, netease cloud followed knocked on a piece of code, using the vue, introduced script tags, with net class is the same, but the console error delItem is not defined, how can I change?

<meta charset="utf-8" & gt;
Event & lt;/title> <br/><style> <br/>- cloak [v] <br/>{<br/>display: none; <br/>} <br/>. List {width: 600 px; height: 25px; Margin - bottom: 10 px} <br/>. The list. The active {background - color: aquamarine; Color: royalblue} <br/></style> <br/></head> <br/><body> <br/><Div id="app" v - cloak> <br/><Ul> <br/><Li: v - for="(item, index) in the list" : the key="index" <br/>@ click="checkedItem (index)" & gt; . {{item name}} - & lt; The button type="button" @ click="delItem (index)" & gt; Delete & lt;/button> </li> <br/></ul> <br/></div> <br/><br/><script SRC="https://cdn.jsdelivr.net/npm/vue@2.6.11" & gt; </script> <br/><script> <br/>New Vue ({<br/>El: "# app," <br/>Data () <br/>{<br/>Return {<br/>The list: <br/>{id: 1, name: "zhang", the age: 28, active: false}, <br/>{id: 2, name: "bill", the age: 18, active: false}, <br/>{id: 3, name: "detective", the age: 38, active: false} <br/>] <br/>} <br/>}, <br/>Methods: {<br/>CheckedItem (index) <br/>{<br/>//the console. The log (index); <br/>Enclosing a list [index]. Active=! Enclosing a list [index]. Active; <br/>} <br/>}, <br/>DelItem (index) {<br/>Enclosing a list. The splice (index, 1); <br/>} <br/>} <br/><br/><br/>) <br/></script> <br/></body> <br/></html> <br/><br/><br/><img SRC="https://img.codepudding.com/202012/175786090214161.png" Alt=""/><p class="article - content rp"> CodePudding user response: </p>DelItem to write inside the method, the code is as follows, <br/><br/><! DOCTYPE html> <br/><HTML lang="en" & gt; <br/><head> <br/><meta charset="utf-8" & gt; <br/><title> Event & lt;/title> <br/><style> <br/>- cloak [v] <br/>{<br/>display: none; <br/>} <br/>. List {width: 600 px; height: 25px; Margin - bottom: 10 px} <br/>. The list. The active {background - color: aquamarine; Color: royalblue} <br/></style> <br/></head> <br/><body> <br/><Div id="app" v - cloak> <br/><Ul> <br/><Li: v - for="(item, index) in the list" : the key="index" <br/>@ click="checkedItem (index)" & gt; . {{item name}} - & lt; The button type="button" @ click="delItem (index)" & gt; Delete & lt;/button> </li> <br/></ul> <br/></div> <br/><br/><script SRC="https://cdn.jsdelivr.net/npm/vue@2.6.11" & gt; </script> <br/><script> <br/>New Vue ({<br/>El: "# app," <br/>Data () <br/>{<br/>Return {<br/>The list: <br/>{id: 1, name: "zhang", the age: 28, active: false}, <br/>{id: 2, name: "bill", the age: 18, active: false}, <br/>{id: 3, name: "detective", the age: 38, active: false} <br/>] <br/>} <br/>}, <br/>Methods: {<br/>CheckedItem (index) <br/>{<br/>//the console. The log (index); <br/>Enclosing a list [index]. Active=! Enclosing a list [index]. Active; <br/>}, <br/>DelItem (index) {<br/>Enclosing a list. The splice (index, 1); <br/>} <br/>} <br/>} <br/><br/><br/>) <br/></script> <br/></body> <br/></html> <br/><p class="article - content rp"> CodePudding user response: </p>Oh oh thank you!!!!! </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/frontend/93179.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/93179.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/93178.html'>What do you like to do for the weekend?</a></div> <div class="detail-arr-right">Next:<a href='/frontend/93180.html'>A solution of 406 status code</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags： </li> <a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links： </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>