Javascript 带shift的Vue Js范围复选框选择

我有这个html：

<div
class="data__file"
v-for="(data, index) in paginatedData"
:key="index"
>
 <label class="data__info" :for="data.idfile" @click="onClickWithShift($event, index)">
   <img
     :src="data.link"
     alt=""
     :class= "{ 'data__image' : 1 ,'data__image-active' : (data.checked === 1) }"
    />
    <input
     v-if="isManager === true"
     type="checkbox"
     class="data__access"
     :value="data.idaccess"
     :checked="(data.checked === 1) ? 1 : null"
     v-model="checkedFilesPermission"      
    />
          
    <input
     v-if="isManager === false"
     type="checkbox"
     class="data__access"
     :value="data.idfile"
     :checked="(data.checked === 1) ? 1 : null"
     v-model="checkedFilesDownload"       
    />
    </label>
</div>

---

我认为VUE以某种方式阻止输入的主要问题是使用

v-model

我已经找到了解决您问题的方法。我添加了一个模拟对象来重新创建相同的场景，希望您有一个对象数组

---

已编辑：已修改解决方案以满足多个取消选择方案

---

newvue({
el:“#应用程序”，
数据：{
分页数据：[
{“链接”：https://img.icons8.com/list“，“idfile”：296，“idaccess”：2}，
{“链接”：https://img.icons8.com/list“，“idfile”：6，“idaccess”：99}，
{“链接”：https://img.icons8.com/list“，“idfile”：26，“idaccess”：29}，
{“链接”：https://img.icons8.com/list“，“idfile”：960，“idaccess”：2919}，
{“链接”：https://img.icons8.com/list“，“idfile”：16，“idaccess”：9339}，
{“链接”：https://img.icons8.com/list“，“idfile”：2，“idaccess”：9}，
],
LastCheckedx:-1，
checkedFilesPermission:[]
},
方法：{
onClickWithShift（事件、idx、idFile）{
var action=（this.checkedFilesPermission.indexOf（idFile）==-1）？“选择”：“取消选择”；
if（event.shiftKey&&this.lastCheckedIdx！=-1）{
var start=this.lastCheckedx；
var端=idx-1；
//可以选择从上到下或从下到上
//总是从较小的值开始
如果（开始>结束）{
开始=idx+1；
end=this.lastCheckedx；
}
对于（var c=start；c这里有一个我刚刚尝试过的东西，它似乎能起作用

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <label>
        <input type="checkbox" v-model="item.checked" @click="checked($event, index)">
        {{item.file}}
      </label>
    </div>
    <pre>{{items}}</pre>

  </div>
</template>

<script>

export default {
  data() {
    return {
      lastCheckedIndex: null,
      lastChange: null,
      items: [
        { file: "foo1", idx: 10 },
        { file: "foo2", idx: 20 },
        { file: "foo3", idx: 40 },
        { file: "foo4", idx: 30 },
        { file: "foo5", idx: 10 },
        { file: "foo6", idx: 90 },
        { file: "foo8", idx: 50 },
      ]
    }
  },
  methods: {
    checked(event, index) {
      // wheter or not to the multiple selection
      if (event.shiftKey && (null != this.lastCheckedIndex) && (this.lastCheckedIndex != index)) {

        const dir = index > this.lastCheckedIndex ? 1 : -1; // going up or down ?
        const check = this.lastChange;                      // are we checking all or unchecking all ?

        for (let i = this.lastCheckedIndex; i != index; i += dir) {
          this.items[i].checked = check;
        }
      }

      // save action
      this.lastCheckedIndex = index; 
      this.lastChange = !this.items[index].checked; // onclick is triggered before the default change hence the !
    }
  },
};

</script>


{{item.file}
{{items}}
导出默认值{
数据（）{
返回{
lastCheckedIndex:null，
lastChange:null，
项目：[
{文件：“foo1”，idx:10}，
{文件：“foo2”，idx:20}，
{文件：“foo3”，idx:40}，
{文件：“foo4”，idx:30}，
{文件：“foo5”，idx:10}，
{文件：“foo6”，idx:90}，
{文件：“foo8”，idx:50}，
]
}
},
方法：{
选中（事件、索引）{
//旋转或不旋转到多重选择
if（event.shiftKey&（null！=this.lastCheckedIndex）&&（this.lastCheckedIndex！=index））{
const dir=index>this.lastCheckedIndex？1:-1；//向上还是向下？
const check=this.lastChange；//我们是全部选中还是全部取消选中？
for（设i=this.lastCheckedIndex；i！=index；i+=dir）{
此.items[i].checked=check；
}
}
//保存操作
this.lastCheckedIndex=索引；
this.lastChange=！this.items[index].选中；//在默认更改之前触发onclick，因此！
}
},
};
感谢您的时间和工作，但在我的页面中，一切都正常，但第一次和最后一次输入之间的复选框没有被选中，我想这是因为我在每次输入中都使用了v-model=“checkedFilesPermission”我用它来知道检查了哪些输入，然后我得到这个数组并将它放入axios请求中，所以我的代码看起来是这样的，但我认为问题不在那，问题可能在
数据中。idFile
？因为它不像
[1,2,3,4,5]
它像
[4,1,10,21,8,5]`？你能用“paginatedData”更新你的问题吗data对象和checkedFilesPermission来找出可能存在的问题我在示例中进行了更改，请说明如何实现多个deselect@BigD当然，我可以更改代码以实现多个取消选择。您还可以将“checkedFilesPermission”的代码你在v型车上用的。我需要看一下，找出选择的问题
<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <label>
        <input type="checkbox" v-model="item.checked" @click="checked($event, index)">
        {{item.file}}
      </label>
    </div>
    <pre>{{items}}</pre>

  </div>
</template>

<script>

export default {
  data() {
    return {
      lastCheckedIndex: null,
      lastChange: null,
      items: [
        { file: "foo1", idx: 10 },
        { file: "foo2", idx: 20 },
        { file: "foo3", idx: 40 },
        { file: "foo4", idx: 30 },
        { file: "foo5", idx: 10 },
        { file: "foo6", idx: 90 },
        { file: "foo8", idx: 50 },
      ]
    }
  },
  methods: {
    checked(event, index) {
      // wheter or not to the multiple selection
      if (event.shiftKey && (null != this.lastCheckedIndex) && (this.lastCheckedIndex != index)) {

        const dir = index > this.lastCheckedIndex ? 1 : -1; // going up or down ?
        const check = this.lastChange;                      // are we checking all or unchecking all ?

        for (let i = this.lastCheckedIndex; i != index; i += dir) {
          this.items[i].checked = check;
        }
      }

      // save action
      this.lastCheckedIndex = index; 
      this.lastChange = !this.items[index].checked; // onclick is triggered before the default change hence the !
    }
  },
};

</script>