シャトルボックス機能を実装するためのVueの詳細なコード

。移行{
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}
.transfer>.list {
    幅: 200ピクセル;
    高さ: 300px;
    境界線: 1px実線 #000;
    リストスタイル: なし;
}
。コンテンツ{
    フォントサイズ: 30px;
    マージン: 0 20px;
}
.list>li{
    パディング: 5px;
    ボックスのサイズ: 境界線ボックス;
}

<div class="転送">
    <!-- 左フレーム -->
    <ul class="リスト左">
        <template v-for="(item, index) in info">
            <li :key="インデックス">
                <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>
        </テンプレート>
    </ul>

    <!-- 追加/削除 -->
    <div class="content">
        <p class="push" @click='push' >>>></p>
        <p class="del" @click='del'><<<</p>
    </div>

    <!-- 右フレーム -->
    <ul class="リスト右">
        <template v-for="(item, index) in new_info">
            <li :key="インデックス" >
                <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>
        </テンプレート>
    </ul>
</div>

データ（）{
    戻る {
        // 元のデータ、左フレームのデータ情報:[
            {id:'1',name:'シャオミン'},
            {id:'2',name:'シャオホン'},
            {id:'3',name:'チキン'},
            {id:'4',name:'ハハハハ'},
            {id:'5',name:'ああ'},
            {id:'6',名前:'dddd'},
            {id:'7',名前:'qwert'},
        ]、
        new_info: [], // 新しいデータ、右フレームデータ}
},
メソッド:{// データを追加する push(){
        that = this とする;
        let info = JSON.parse(JSON.stringify(that.info)); // 元のデータをコピーします。ディープコピー info.forEach((item, index)=>{
            // 選択が true の場合にデータを実行する if (item.select){
                that.new_info = that.new_info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 新しいデータフレームに追加してソート delete info[index]; // データを削除 item.select = false; 
            }
        })
        info = info.filter(function (val) { return val }); // フィルターは未定義 
        that.info = info; // 元のデータを更新\
    },
    // データを削除 del(){
        that = this とする;
        let info = JSON.parse(JSON.stringify(that.new_info)); // 元のデータをコピーします。ディープコピー info.forEach((item, index)=>{
            // 選択が true の場合にデータを実行する if (item.select){
                that.info = that.info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 新しいデータフレームに追加してソート delete info[index]; // データを削除 item.select = false;
            }
        })
        info = info.filter(function (val) { return val }); // フィルターは未定義 
        that.new_info = info; // 元のデータを更新する},
},

マウントされた(){
    that = this とする;
    // 選択されているかどうかを判断するために、元のデータに選択フィールドを追加します。that.info.map((val,key)=>{ that.$set(val,'select',false) });
}