vue radio components and Select All.

This is a page I'm concerned, is a function of the radio and select all, then go to their cancellation. I'm not using input box, using Ali's icon icon. First began to hide the icon, then click the time again, click again disappeared.

<template>
    <div class="content">
        <div class="guan"><span>关注你感兴趣的人</span></div>
        <div class="box">
            <div class="zyun">
                <div class="zyun-z" @click="tap(i)" v-for="(item,i) in list" :key='item.i'>
                    <div class="z-a">
                        <i v-show="item.icon"  class="iconfont icon-duihao"></i>
                    </div>
                    <p>{{ item.name }}</p>
                    <p v-if="item.names==item.names">{{ item.names }}</p>
                    <p v-else></p>
                </div>
            </div>
            <div  @click="tap1()" class="guanzhu">{{ tie }}</div>
        </div>
    </div>
</template>

<Script>
    Export default {
        the Data () {
            return {
                TIE: 'a key concern',
                TIES: 'a key to cancel',
                List: [
                    {
                        icon: false,
                        name: 'I have a cat',
                        names: 'Life of people '
                    },
                    {
                        icon: to false,
                        name:' home MOMO '
                        names:' outfit experts '
                    },
                    {
                        icon: to false,
                        name: "small tidal sister',
                        names: 'baby 1 year 3 months',
                    },
                    {
                        icon: false,
                        name: 'I have a cat',
                        names: '',
                    },
                    {
                        icon: false,
                        name: 'MOMO home',
                        names: '' ,
                    },
                    {
                        icon: to false,
                        name: 'small tidal sister',
                        names: '',
                    },
                    {
                        icon: to false,
                        name: 'I have a cat',
                        names: '',
                    },
                    {
                        icon: false,
                        name: 'MOMO home',
                        names: '',
                    },
                    {
                        icon: false,
                        name: 'small tidal sister',
                        names: '',
                    },
                    {
                        icon: false,
                        name: 'I have a cat',
                        names: '',
                    },
                    {
                        icon:false,
                        name:'momo家',
                        names:'',
                    },
                    {
                        icon:false,
                        name:'小汐姐',
                        names:'',
                    },
                ]
            };
        },
        methods:{
            tap(i){
                this.list[i].icon=!this.list[i].icon
            },
            tap1(){
                    // console.log(this.list)
                    var _this=this;
                for (var i = 0; i <_this.list.length; i ++) {// iterate back to Select and Cancel based on the index value
                        // the console.log (_this.list [I] .icon)
                        _this.list [I !] _ = .icon This.List [I] .icon;
                }
            }
        }
    }
</ Script>

<style scoped>
.content{
        width: 100%;
    height: auto;
    overflow: auto;
        display: flex;
        flex-direction: column;
        flex: 1;
}

.box{
    width: 96%;
    box-sizing: border-box;
    padding: 0 0.625rem;
    background: #F8F8F8;
    margin: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}
.zyun{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    box-sizing: border-box;
    padding:1.25rem ;
}
.zyun-z{
    background: #F8F8F8;
    width: 5rem;
    margin: 0.625rem 0;
}
.z-a{
width: 4.625rem;
height: 4.625rem;
background-color: rgba(217, 217, 217, 1);
border-radius:50% ;
}
.iconfont {
    float: right;
  color: #F7A226;
}
.zyun-z p{
    font-size: 0.75rem;
    color: #A6A4A4;
    text-align: center;
}
.guan{
    width: 100%;
    height: 1.875rem;
    display: flex;
    justify-content: center;
    margin: 0.9375rem 0;
}
.guan span{
    width: 7.5rem;
    text-align: center;
    line-height: 1.875rem;
    background: #F8F8F8;
    font-size: 0.875rem;
    color: #A4A2A2;
}
.guanzhu{
    width: 7.5rem;
    height: 1.875rem;
    text-align: center;
    line-height: 1.875rem;
    background: #D7D5D5;
    font-size: 0.875rem;
    color: #646464;
    border-radius:20% ;
    position: absolute;
    bottom: 1.25rem;
    left: 30%;
}
</style>