鍍金池/ 問答/網(wǎng)絡安全  HTML/ vue 子組件在v-for里如何做到單擊某個子組件value+1，其他子組件va

vue 子組件在v-for里如何做到單擊某個子組件value+1，其他子組件value-1?

<!DOCTYPE html>
<html lang="en">
<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>

然后現(xiàn)在要單擊對應的子組件做到單擊的那個子組件的value+1，其他的value-1

回答
編輯回答
尛曖昧
<child v-for="(value,key) in list" @click='handleclick(key)'></child>

handleclick(i){
    this.list.filter((item,index)=>{
        return index==i?item.A+1:item.A-1;
    })
}
2018年4月18日 11:35