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"将您的所有复选框与最近选择的文件变量相关联。因此，它们同时是对还是错

要解决此问题，请在v模型中使用recentlySelectedFiles[index]（或id）以类似[false，true，false]（表示仅选择了第二个文件）的数组的形式威胁您最近选择的文件

当单击单个复选框时，VueJS v模型会选择所有复选框

1 个答案: