Vuejs, removing element from nested lists

Question

This is a followup question on VUEJS remove Element From Lists?, where they give various methods (this.$remove, splice, this.$delete) for dynamically removing a element from a list. I was trying to understand how to apply this to a nested loop; here's mine in three+ levels, somewhat stripped-down:

<template v-for="(labtype,index) in labIRlist">
  <template v-for="(lab,index2) in labtype">
    <tr v-for="(IR,index3) in lab.irs" :key="IR.irn">
      <td><p>{{ lab.hidtxt }}_{{ lab.mnem }}</p></td>
      <td><p>{{ lab.PNL }}</p></td>
      <td><p>{{ IR.provider}} {{ IR.psurv }}</p></td>
      <td><p>{{ IR.year }}-{{ IR.eventno }}</p></td>
      <td><p>{{ IR.analytes }}</p></td>
      <td><p>
        <button type="button" 
          @click="deleteIR(IR.irn,index,index2,index3)">
            DELETE
        </button>
      </p></td>
    </tr>
  </template>
</template>

Then there's Javascript for the deletion

methods: {
  deleteIR: function(IRNum,index,index2,index3) {
    // okay, delete!
    //... code to do something at the database...
    alert('IR successfully deleted!')
    // don't show the deleted IR any more
    this.labIRlist[index][index2].irs.splice(index3,1);
  },

Awful, but I didn't know how to identify the correct element. And it still didn't work (AFAIK it does nothing, no change visible to the row). How should this be done - don't we know the right element from where deleteIR was called?

Could you add a demo for this? A codesandbox or something? Or at least show us a part of the data you have in labIRlist — AVJT82
– AVJT82, Commented Apr 23, 2021 at 5:10
Also still doesn't work is not helpful. What does the function do currently? Nothing, throw an error, delete wrong line or what? — AVJT82
– AVJT82, Commented Apr 23, 2021 at 5:18
@AJT82 Perhaps I should have left out the comment that it didn't work - because my real question is, What is the better way to handle deleting an element within multiple loops? — Mike Arrh
– Mike Arrh, Commented Apr 23, 2021 at 21:48

AVJT82 · Accepted Answer · 2021-04-24 05:00:28Z

0

What is the better way to handle deleting an element within multiple loops?

First of all, looking at how your template is built, we can assume that your data looks something like this:

  labIRlist: [
    [
      {
        hidtxt: "TEXT 1",
        irs: [{ provider: "provider1" }, { provider: "provider11" }],
        irn: "irn1",
      },
      {
        hidtxt: "TEXT 2",
        irs: [
          { provider: "provider2" },
          { provider: "provider22" },
          { provider: "provider222" },
        ],
        irn: "irn2",
      },
    ],
    [
      {
        hidtxt: "TEXT 3",
        irs: [{ provider: "provider3" }],
        irn: "irn3",
      },
    ],
  ],

If you want to delete one item from the nested irs array, all you need to do is to pass the irs array and the index of the item you want to delete, no need to do the whole path you are doing currently:

this.labIRlist[index][index2].irs.splice(index3,1);

So change your template to:

<button type="button" @click="deleteIR(lab.irs, index3)">

And the delete function is then simply:

deleteIR(IRS, index) {
  IRS.splice(index, 1);
}

A DEMO for your reference

PS. Please always share a bit of your data when posting questions like this. Much easier to answer when not needing to create your own sample data like I did here.

answered Apr 24, 2021 at 5:00

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike Arrh Over a year ago

Ah! That's exactly what I was asking: A way to address the data from the bottom of the loop directly. Thanks!

Mike Arrh Over a year ago

I see now what you mean by providing data. Thanks again.

AVJT82 Over a year ago

OK Great, glad I could help! :)

Collectives™ on Stack Overflow

Vuejs, removing element from nested lists

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related