javascript - VueJS v-model 在单击单个复选框时选择所有复选框

Question

我正在使用 VueJs 和 Bootstrap 开发一个应用程序。使用 v-for 生成多张卡片。每张卡都有一个复选框。将鼠标悬停在卡片上时，复选框会出现，而 onMouseOut 则会消失，除非它被选中。

当我尝试选择一张卡时，所有卡都会被选中。

这是代码:

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
    }
  }

}

<template>
  <div v-for="i in recentFiles" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths" @mouseover="showByIndexRecent = i" @mouseout="showByIndexRecent = null">
    <stats-card>

        <div slot="header" class="header-rectangle" @contextmenu.prevent="$refs.menu.open">

            <div>
                <label class="form-checkbox" v-show="showByIndexRecent === i || recentlySelectedFiles.includes(i.name)" style="margin-top: 8px;float: right;margin-right: 10px;margin-left: 0px;">
                <input type="checkbox" style="height:16px; width: 16px;" :value="i.name" v-model="recentlySelectedFiles">
                    <i class="form-icon">
                    </i>
                </label>
            </div>

            <div style="margin-left: 25px;">
                <img :src="i.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>{{i.name}}</span>
                    </div>
                    <div class="file-size-style" >
                        <span>{{i.size}} MB</span>
                    </div>
                </div>
                <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
                    <div v-show="!i.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>
</template>

我做错了什么？有人可以帮我吗？

Answer 1

v-model="recentlySelectedFiles" 将所有复选框与recentlySelectedFiles 变量关联起来。所以，它们同时是真或假

要解决这个问题，请将你的recentlySelectedFiles作为一个数组，如[false, true, false](这表明只选择了你的第二个文件)，在你的文件中使用recentlySelectedFiles[index](或id) v-模型