新手·ing 发表于 2018-8-10 21:36:36

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

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

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

    <script>
      new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function() {
                  this.list.push(this.inputValue)
                  this.inputValue = ''
                },
               
                handleDelete: function() {
                  //this.list.splice(, 1)
                }
               
            }
      })
    </script>
</body>
</html>

新手·ing 发表于 2018-8-10 21:37:08

@不二如是

claws0n 发表于 2018-8-10 22:43:46

路过学习
this.list.splice(index,1)   ?

新手·ing 发表于 2018-8-11 09:49:52

解决了,谢谢
页: [1]
查看完整版本: 有关vue如何获取v-for中的index值