单击单个复选框时，VueJS v-model 会选择所有复选框答案

【问题标题】：VueJS v-model selects all the checkboxes when clicked on a single checkbox单击单个复选框时，VueJS v-model 会选择所有复选框
【发布时间】：2019-03-01 20:10:40
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： javascript html twitter-bootstrap vue.js vuejs2

【解决方案1】：

v-model="recentlySelectedFiles" 将您的所有复选框与最近选择的文件变量相关联。所以，它们同时是真或假

要解决这个问题，请在 v-model 中使用 recentlySelectedFiles[index]（或 id）将您的 recentSelectedFiles 威胁为 [false, true, false] 之类的数组（这表示仅选择了您的第二个文件）

【讨论】：

我试过它似乎不起作用。你能帮帮我吗？
我是你的对象。您应该使用一些不同的数字来指示数组中的特定位置。如果需要，可以在 v-for (br.vuejs.org/v2/guide/list.html) 中使用 index，然后使用 recentSelectedFiles[index]
非常感谢。它现在正在工作。此外，当我选择一张卡片并将鼠标悬停在另一张卡片上时，所选卡片上的复选框不会保留。我在这里做错了什么？