Vue's detailed code for implementing the shuttle box function

.transfer{
    display: flex;
    justify-content: center;
    align-items: center;
}
.transfer>.list {
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    list-style: none;
}
.content{
    font-size: 30px;
    margin: 0 20px;
}
.list>li{
    padding: 5px;
    box-sizing: border-box;
}

<div class="transfer" >
    <!-- Left frame -->
    <ul class="list left">
        <template v-for="(item, index) in info">
            <li :key="index">
                <input type="checkbox" :id=`checkbox${item.id}` name="checkbox" :checked="item.select" @click="item.select=!item.select" />
                <label :for=`checkbox${item.id}` >{{ item.name }} </label>
            </li>
        </template>
    </ul>

    <!-- Add/Remove -->
    <div class="content">
        <p class="push" @click='push' >>>></p>
        <p class="del" @click='del' ><<<</p>
    </div>

    <!-- Right frame -->
    <ul class="list right">
        <template v-for="(item, index) in new_info">
            <li :key="index" >
                <input type="checkbox" :id=`newcheckbox${item.id}` name="newcheckbox" :checked="item.select" @click="item.select=!item.select" />
                <label :for=`newcheckbox${item.id}`>{{ item.name }} </label>
            </li>
        </template>
    </ul>
</div>

data(){
    return {
        // Original data, left frame data info:[
            {id:'1',name:'Xiao Ming'},
            {id:'2',name:'Xiaohong'},
            {id:'3',name:'Chicken'},
            {id:'4',name:'Hahahaha'},
            {id:'5',name:'Ahhhhh'},
            {id:'6',name:'dddd'},
            {id:'7',name:'qwert'},
        ],
        new_info: [], // New data, right frame data}
},
methods:{// add data push(){
        let that = this;
        let info = JSON.parse(JSON.stringify(that.info)); // Copy the original data, deep copy info.forEach((item, index )=>{
            // Execute data where select is true if (item.select){
                that.new_info = that.new_info.concat(item).sort((a,b)=>{ return a.id - b.id }); // Add to new data frame, sort delete info[index]; // Delete data item.select = false; 
            }
        })
        info = info.filter(function (val) { return val }); // Filter undefined 
        that.info = info; // Update original data\
    },
    // Remove data del(){
        let that = this;
        let info = JSON.parse(JSON.stringify(that.new_info)); // Copy the original data, deep copy info.forEach((item, index )=>{
            // Execute data where select is true if (item.select){
                that.info = that.info.concat(item).sort((a,b)=>{ return a.id - b.id }); // Add to new data frame, sort delete info[index]; // Delete data item.select = false;
            }
        })
        info = info.filter(function (val) { return val }); // Filter undefined 
        that.new_info = info; // Update original data},
},

mounted(){
    let that = this;
    // Add a select field to the original data to determine whether it is selected that.info.map((val,key)=>{ that.$set(val,'select',false) });
}