选择卡片后，复选框标签没有保留

Question

我正在使用VueJs和Bootstrap开发应用程序。使用v-for可以生成多张卡片。每张卡都有一个复选框。将鼠标悬停在卡片上时，会出现该复选框，并且onMouseOut会消失。

选择一张卡并移动到下一张卡后，所选卡上的复选框标签将消失。如何确保一旦选中复选框以及用户将鼠标悬停在另一张卡上时，复选框标签仍会保留？

代码如下：

import { VueContext } from 'vue-context';
import StatsCard from 'src/components/UIComponents/Cards/StatsCard.vue'
import Card from 'src/components/UIComponents/Cards/Card.vue'

export default {
    data(){
        return{


            recentlySelectedFiles: [],
            allRecentFilesSelected: false,
            showByIndexRecent: null

        }
    }
}

<div v-for="(item, index)  in recentFiles" @mouseover="showByIndexRecent = index" @mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
                <stats-card>
                      
                    <div slot="header" class="header-rectangle" @contextmenu.prevent="$refs.menu.open">
                      
                        <div>
                            <label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="margin-top: 8px;float: right;margin-right: 10px;margin-left: 0px;">
                                <input type="checkbox" style="height:16px; width: 16px;" :value="item.name" v-model="recentlySelectedFiles[index]">
                                    <i class="form-icon">
                                    </i>
                            </label>
                        </div>
                    
                        <div style="margin-left: 25px;">
                            <img :src="item.source" style=" height: 50px; margin-top: 50px">
                        </div>

                    </div>
                    <div slot="footer" @contextmenu.prevent="$refs.menu.open" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
                        <div class="row" >
                            <div class="col-9"  style="display: flex;flex-direction: column;justify-content: center;">
                                <div class="file-name-style">
                                    <span>{{item.name}}</span>
                                </div>
                                <div class="file-size-style" >
                                    <span>{{item.size}} MB</span>
                                </div>
                            </div>
                            <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
                                <div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
                                    <i class='fas fa-users' id="image"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </stats-card>
            </div>

有人可以在这里帮助我吗？谢谢！