Send index from child component to the parent one to remove array item in v-for - VUE.JS 2

Question

I am a little newbie using Vue JS, so i started with Vue 2.

I need to remove an array item but the button that trigger that method is inside a template and the v-for is inside a parent template.

This is my HTML:

MAIN

<div id="main">
    <div class="panel-group" id="panelGrp">
        <div class="row panelTopSpacing" v-for="panel in panels" is="panel-row" :panel.sync="panel" :general-fields="generalFields" :assistants="assistants" :companies="companies" :positions="positions"></div>
    </div>
</div>

CHILD

//CHILD TEMPLATE 
<template id="panelsTpl">           
        <div class="panel panel-success">
            <div class="panel-heading">                    
                {{panel.title}}
                <a :class="panel.classObj.link" role="button" data-toggle="collapse" data-parent="#panelGrp" :href.sync="'#'+panel.id"></a>
                <i :class="panel.infoIcon"></i>
            </div>
            <div :id.sync="panel.id" :class="panel.classObj.panel">
                <div class="panel-body">
                    <div class="container-fluid" v-if="panel.id === 'genInfo'">                            
                        <div class="row">
                            <div v-for="genField in generalFields" is="general-field" :gen-field.sync="genField"></div>
                        </div>
                    </div>
                    <div class="container-fluid" v-else-if="panel.id === 'assistants'">                            
                        <div class="row">
                            <table class="table table-striped table-responsive table-hover">
                                <tr>
                                    <th>Internal?</th>
                                    <th>Can read?</th>
                                    <th>Position</th>
                                    <th>Name</th>
                                    <th>Company</th>
                                    <th width="50px">&nbsp;</th>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td><input type="checkbox" ></td>
                                    <td></td>
                                    <td><input type="text" class="form-control"></td>
                                    <td></td>
                                    <td><a href="#" @click="addAssistant()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a></td>
                                </tr>
                                <tr v-for="(assistnt,index) in assistants" is="assistant-row" :assistant.sync="assistnt"></tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

CHILD OF CHILD TEMPLATE

<template id="asstntsTpl">
        <tr v-if="! editing"> 
            <td>{{ assistant.internal }}</td>
            <td>{{ assistant.allowRead }}</td>
            <td>{{ assistant.positionId | position }}</td>
            <td>{{ assistant.name }}</td>
            <td>{{ assistant.cmpnyId | company }}</td>                    
            <td>
                <a href="#" @click="edit()"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                <a href="#" @click="remove(index)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
            </td>
        </tr>
        <tr v-else>
            <td><input type="checkbox" v-model="assistant.internal"></td>
            <td><input type="checkbox" v-model="assistant.allowRead"></td>
            <td><!--<select-position :position="positions" :id.sync="assistant.positionId"></select-position>--></td>
            <td><input type="text" v-model="assistant.name" class="form-control"></td>
            <td><!--<select-company :company="companies" :id.sync="assistant.cmpnyId"></select-company>--></td>                    
            <td><a href="#" @click="update()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a></td>
        </tr> 
    </template>

JS:

var main = new Vue({
el: "#main",
data: {
    valid: false,
    new_assistant: {
        id: "",
        name: "",
        internal: true,
        cmpnyId: "",
        positionId: "",
        allowRead: false
    },
    panels: [
        {id: "genInfo", title: "General Info", classObj: {panel: "panel-collapse collapse in", link: ""}, infoIcon: "fas fa-file-alt infoIcon pull-right"},
        {id: "assistants", title: "Assistants", classObj: {panel: "panel-collapse collapse", link: "collapsed"}, infoIcon: "fas fa-users infoIcon pull-right"},
        {id: "agrmtns", title: "Agreements", classObj: {panel: "panel-collapse collapse", link: "collapsed"}, infoIcon: "fas fa-file-signature infoIcon pull-right"}
    ]
    assistants: [
        {id: "1",
            name: "Bob",
            internal: true,
            cmpnyId: "1",
            positionId: "1",
            allowRead: false},
        {id: "2",
            name: "John",
            internal: true,
            cmpnyId: "1",
            positionId: "1",
            allowRead: false}
    ],
    companies: [
        {id: "1", name: "cmpny1"},
        {id: "2", name: "cmpny2"},
        {id: "3", name: "cmpny3"}
    ],
    positions: [
        {id: "1", name: "Pos1"},
        {id: "2", name: "Pos2"},
        {id: "3", name: "Pos3"}
    ]
},
methods: {
    addAssistant: function () {
        this.assistants.push(this.new_assistant);

        this.new_assistant = {
            id: "",
            name: "",
            internal: true,
            cmpny_id: "",
            position_id: "",
            allowRead: false};
    }
}

Everthing is working fine at this moment, but when I try to delete a row from the table that is populated with assistants array, it deletes the first row however i clicked the trash icon of second row.

VUE COMPONENT:

Vue.component("assistant-row", {
template: "#asstntsTpl",
props: ["nw-assistant", "assistant"],
data: function () {
    return {
        editing: false
    };
},
methods: {
    remove: function (index) {
        this.$parent.assistants.splice(**index**, 1);
    },
    edit: function () {
        this.editing = true;
    },
    update: function () {
        this.editing = false;
    }
}
});

Seems like splice is not working at all.

PD::: I know how to use it in a simple scenario, like:

<li v-for="cat,index in categories">
    <button @click="remove(index)">Remove</button>
</li>

I made this little jsfiddle simulating something like above code:

https://jsfiddle.net/empiricalDev/eywraw8t/399050/

Thanks in advance.

Regards!

[Emit an event from the child](https://jsfiddle.net/z8rgpt06/1/) that tells the parent which item needs to be deleted and let the parent delete it. — Bert, Sep 28 '18 at 23:42
can you visit this question https://stackoverflow.com/questions/52551840/nested-components-not-re-rendering-properly-vuejs i think is the same as you — khofaai, Sep 29 '18 at 00:38
@ElAlamiAnas i took your advice and i had used ``$emit` function, please check the answer — Boussadjra Brahim, Sep 29 '18 at 10:43
I meant, i updated the code embedded the question. let me change the jsfiddle. — empiricalDev, Oct 01 '18 at 16:45
Thanks @boussadjrabrahim. You are awesome. Any improvement to my code, i'd appreciate it. — empiricalDev, Oct 01 '18 at 21:19
did you try vue cli 3 and single file components? because the way you're working with is complicated — Boussadjra Brahim, Oct 01 '18 at 21:34
I didn't. It is my first vue project and i just had followed some video tutorials.. I'm using netbeans. I downloaded vuejs file and then i created js file where i am creating components and new vue instance. What do you recommend? — empiricalDev, Oct 01 '18 at 21:45

Boussadjra Brahim · Answer 1 · 2018-09-29T23:35:17.090

You could try to use this.$emit() to emit an event to the parent component like this.$emit("delete",this.todo); which has event name as first parameter and this.todo as a second one, in the parent component add @delete="removechild" as follow :

<tod v-for="(todo, index) in todos" :todo="todo" @delete="removechild"></tod>

and implement your removechild in the parent component as follow :

removechild(todo){
  this.todos.splice(this.todos.indexOf(todo),1);
}

Note :

if your prop is an object like {id:1,name:"todo 1"} you could filter your todos array like this.todos= this.todos.filter((item)=>{return item.id!=todo.id});

Vue.component("tod",{
  template:"#tpl",
  props:["todo"],
  methods: {
      remove: function() {
  
        this.$emit("delete",this.todo);
      }
    }
});  

new Vue({
    el: '#app',
    data: {
      todos: ['Buy milk', 'Do exercises', 'Write a book', 'Plant a tree']
    },
    methods:{
    
    removechild(todo){
    this.todos= this.todos.filter((item)=>{return item!=todo});
 
    }
    }
    
  })

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <ol>
      <tod v-for="(todo, index) in todos" :todo="todo" @delete="removechild"></tod>
    </ol>
  </div>
  <template id="tpl">
    <li>
        {{todo}}
        <button @click="remove">&times;</button>
    </li>
      
  </template>
</body>
</html>

Thank you, just in place of `filter` try `splice` and you can get element index with `indexOf()`, you can check my example https://codesandbox.io/s/qzrp4p3qw9 — khofaai, Sep 29 '18 at 11:54
Hi Boussadjra, thank you for reply. I think i missed configure it in the jsfiddle.I mean, the v for is inside a component too and not inside the main. -- vfor panel in panels (inside main) //Parent ---vfor content,index in panel (inside panel tmplte) //Child ---- — empiricalDev, Oct 01 '18 at 14:43
Hi @boussadjra brahim, i updated the code in my original post. There you can see my current structure. Thanks in advance! — empiricalDev, Oct 01 '18 at 16:14
What about sending function as prop? rather than using emit we just need to execute props.function from the child component function! — wui, Jan 31 '23 at 14:29

Send index from child component to the parent one to remove array item in v-for - VUE.JS 2

1 Answers1