vue 子组件在v-for里如何做到单击某个子组件value+1,其他子组件value-1?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="./vue.js"></script>

    <title>component-4</title>

</head>

<body>

    <h1>component-4</h1>

    <hr>

    <div id="app">

      <child v-for="(value,key) in list"></child>

    </div>

 

    <script type="text/javascript">

        Vue.component('child',{

            template:'<div style="color:red;" @click="setClear">{{value}}</div>',

            data:function(){

                return {

                    value:1

                }

            },

            methods:{

                setClear:function(){

                    this.value=0;

                }

            }

        });

        

       

        var vm=new Vue({

            el:'#app',

            data:{

                list:[

                {A:1},

                {A:2},

                {A:3},

                {A:4}

                ]

            },

            methods:{

                

            }

        })

    </script>

</body>

</html>

然后现在要单击对应的子组件做到单击的那个子组件的value+1,其他的value-1


慕运维8079593
浏览 411回答 1
1回答

海绵宝宝撒

<child v-for="(value,key) in list" @click='handleclick(key)'></child>handleclick(i){&nbsp; &nbsp; this.list.filter((item,index)=>{&nbsp; &nbsp; &nbsp; &nbsp; return index==i?item.A+1:item.A-1;&nbsp; &nbsp; })}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript