[Vuejs]-VueJs2:remove item from parent array in component

by

0👍

✅

Use a key on your list.

<div v-for="(item, index) in list" :key="item.id">

I modified your fiddle to generate an id for each object added to the cornerList array.

var formuploadimage = Vue.extend({
  template: '#template-form-upload-image',
  props: {
    list: {
      type: Array
    }
  },
  data: function() {
    return {
      isFileChanged: false
    }
  },
  watch: {
    validCnt: function() {
       
    },
  },

  methods: {
    onFileChange: function(item) {
     var vm = this; 
      let id = Math.max.apply(Math, vm.$parent.cornerList.map(c => c.id)) + 1
        var newItem = {id};
        vm.$parent.cornerList.push(newItem);
    },
    removeAnother: function(item) {
      var vm = this;
      var num = vm.$parent.cornerList.indexOf(item);
      vm.$parent.cornerList.splice(num, 1);
    },
  },
});




var app = new Vue({
  el: ".lists-wrappers",
  data: {
    cornerList: [{id: 1}],
  },
  components: {

    formuploadimage: formuploadimage
  },
  methods: {

  },

});
.select-file{
  width:250px;
  border:1px solid red;
}
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div class="lists-wrappers">
  <formuploadimage :list="cornerList"></formuploadimage>
</div>


<script type="text/x-template" id="template-form-upload-image">
  <div>

    <div v-for="(item, index) in list" :key="item.id">
      
      <div class="select-file">
      <a href="#" v-on:click="removeAnother(item)">REMOVE</a><br/>
        <label for="file-input">
          +Add photo
        </label>
        <input type="file" @change="onFileChange(item)"  />
      </div>
    </div>
  </div>
</script>

Leave a comment