Отправьте индекс из дочернего компонента в родительский для удаления элемента массива в v-for - VUE.JS 2 - PullRequest
Новая
       12

Отправьте индекс из дочернего компонента в родительский для удаления элемента массива в v-for - VUE.JS 2

0 голосов
/ 29 сентября 2018

Я немного новичок, использующий Vue JS, поэтому я начал с Vue 2.

Мне нужно удалить элемент массива, но кнопка, которая вызывает этот метод, находится внутри шаблона, а v-for - внутриродительский шаблон.

Это мой 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 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>

ШАБЛОН РЕБЕНКА 

<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};
    }
}

В настоящий момент все работает нормально, но когда япопробуйте удалить строку из таблицы, которая заполнена массивом помощников, она удаляет первую строку, однако я щелкнул значок корзины во второй строке.

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;
    }
}
});

Похоже, сращивание не работает вообще.

PD ::: Iзнаете, как использовать его в простом сценарии, например: 

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

Я сделал этот маленький jsfiddle, имитирующий что-то вроде кода выше:

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

Заранее спасибо.

С уважением!

1 Ответ

0 голосов
/ 29 сентября 2018

Вы можете попытаться использовать this.$emit() для отправки события в родительский компонент, например this.$emit("delete",this.todo);, у которого event имя в качестве первого параметра и this.todo в качестве второго, в родительском компоненте добавьте @delete="removechild" каквыполните следующие действия:

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

и внедрите removechild в родительский компонент следующим образом: 

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

Примечание:

если ваш prop является объектом типа {id:1,name:"todo 1"}, вы можете отфильтровать массив todos как 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>
...