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

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

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

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

x

正在做一个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

解决了，谢谢

账号		自动登录	找回密码
密码			立即注册