鱼C论坛

 找回密码
 立即注册
查看: 4122|回复: 3

有关vue如何获取v-for中的index值

[复制链接]
发表于 2018-8-10 21:36:36 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
正在做一个todolist,想实现点击添加的计划就删除的功能,想法是绑定删除函数,通过index索引删除数组中的那个计划,问题在于如何获取index?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  8.     <title>Document</title>
  9. </head>
  10. <body>

  11.     <div id="root">
  12.         <input type="text" autofocus="autofocus" v-model="inputValue">
  13.         <button @click="handleSubmit">提交</button>
  14.         <ul>
  15.             <li v-for="(item, index) of list" :key="index" @click="handleDelete">{{item}}</li>
  16.         </ul>
  17.     </div>

  18.     <script>
  19.         new Vue({
  20.             el: "#root",
  21.             data: {
  22.                 inputValue: '',
  23.                 list: []
  24.             },
  25.             methods: {
  26.                 handleSubmit: function() {
  27.                     this.list.push(this.inputValue)
  28.                     this.inputValue = ''
  29.                 },
  30.                
  31.                 handleDelete: function() {
  32.                     //this.list.splice(, 1)
  33.                 }
  34.                
  35.             }
  36.         })
  37.     </script>
  38. </body>
  39. </html>
复制代码

NKCIZYIG])PJ533MX]29EP7.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-8-10 21:37:08 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-10 22:43:46 | 显示全部楼层
路过学习
this.list.splice(index,1)   ?
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-11 09:49:52 | 显示全部楼层
解决了,谢谢
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-8 05:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表