Javascript 通过单击从数组中删除项

通过单击数组元素，我将其添加到新数组的末尾

<div class="grid">
  <div class="cell" v-for="item in posts" :key="item">
    <img :class="{active: item.isActive}" :src="item.url" alt width="293px" height="293px" @click="choosePost(item)" />
  </div>
</div>

    choosePost(item) {
    item.isActive = !item.isActive
    if (item.isActive == true) {
      this.selectedPosts.push(item)
    } else this.selectedPosts.splice(????, 1)
  console.log(this.selectedPosts)
},

选择Post（项目）{
item.isActive=！item.isActive
如果（item.isActive==true）{
此.selectedPosts.push（项目）
}否则，此.selectedPosts.splice（？？，1）
console.log（this.selectedPosts）
},

---

我希望这样，当我再次单击某个元素时，它将从数组中删除。我尝试使用拼接方法，但我不明白如何获得所选项目的索引。请告诉我怎么做

您可以在v-for循环外观中使用索引：

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img :class="{active: item.isActive}" :src="item.url" alt width="293px" height="293px" @click="choosePost(item, index)" />
  </div>
</div>

choosePost(item, index) {
    item.isActive = !item.isActive
    if (item.isActive == true) {
      item["posIndex"] = index;
      this.selectedPosts.push(item)
    } else {
      let pos = this.selectedPosts.map(function(e) { return e.posIndex; }).indexOf(index);
      this.selectedPosts.splice(pos, 1);
    }
  console.log(this.selectedPosts)
},

选择Post（项目、索引）{
item.isActive=！item.isActive
如果（item.isActive==true）{
项目[“posIndex”]=索引；
此.selectedPosts.push（项目）
}否则{
让pos=this.selectedPosts.map（函数（e）{returne e.posIndex；}）.indexOf（index）；
这是所选的接线柱拼接（位置1）；
}
console.log（this.selectedPosts）
},

您可以在v-for循环外观中使用索引：

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img :class="{active: item.isActive}" :src="item.url" alt width="293px" height="293px" @click="choosePost(item, index)" />
  </div>
</div>

choosePost(item, index) {
    item.isActive = !item.isActive
    if (item.isActive == true) {
      item["posIndex"] = index;
      this.selectedPosts.push(item)
    } else {
      let pos = this.selectedPosts.map(function(e) { return e.posIndex; }).indexOf(index);
      this.selectedPosts.splice(pos, 1);
    }
  console.log(this.selectedPosts)
},

选择Post（项目、索引）{
item.isActive=！item.isActive
如果（item.isActive==true）{
项目[“posIndex”]=索引；
此.selectedPosts.push（项目）
}否则{
让pos=this.selectedPosts.map（函数（e）{returne e.posIndex；}）.indexOf（index）；
这是所选的接线柱拼接（位置1）；
}
console.log（this.selectedPosts）
},

您可以在

v-for

中获得

索引：

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img
      :class="{ active: item.isActive }"
      :src="item.url"
      width="293px"
      height="293px"
      @click="choosePost(item, index)"
    />
  </div>
</div>

您可以在
v-for
中获得
索引：

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img
      :class="{ active: item.isActive }"
      :src="item.url"
      width="293px"
      height="293px"
      @click="choosePost(item, index)"
    />
  </div>
</div>


仅适用于旧数组的第一个元素。我不明白为什么
项目
看起来像什么，你能给我看一下结构吗=第一个元素一切正常。属性“isActive”在下一个元素处更改为false，但该元素不会在数组处删除此代码。你切错了索引。例如，如果选择第二项，则索引将为1。该项目将存储在
selectedPosts
中。但是当你尝试对它进行切片时，你会在索引1处对项目进行切片，但是
selectedPosts
只包含1个值，因此他的索引是0而不是1。我编写了一行代码来获取该元素的正确索引选择第三个元素，然后取消选择它
pos
应为
0
仅适用于旧数组的第一个元素。我不明白为什么
项目
看起来像什么，你能给我看一下结构吗=第一个元素一切正常。属性“isActive”在下一个元素处更改为false，但该元素不会在数组处删除此代码。你切错了索引。例如，如果选择第二项，则索引将为1。该项目将存储在
selectedPosts
中。但是当你尝试对它进行切片时，你会在索引1处对项目进行切片，但是
selectedPosts
只包含1个值，因此他的索引是0而不是1。我编写了一行代码来获取该元素的正确索引选择第三个元素，然后取消选择它
pos
应为
0
仅适用于旧数组的第一个元素。我不明白为什么只对旧数组的第一个元素起作用。我不明白为什么