VueJs2: supprime l'élément du groupe parent dans le composant

Question

J'ai un composant avec la liste d'accessoires. La liste est la liste des fichiers d'entrée. A la fois l'entrée a changé, j'ajoute une autre entrée. Comportement étrange si j'essaye de supprimer.

https://jsfiddle.net/apokjqxx/115/

removeAnother: function(item) { 
    var vm = this; 
    var num = vm.$parent.cornerList.indexOf(item); 
    vm.$parent.cornerList.splice(num, 1); 
}, 

Comment reproduire:

• choisir le fichier dans la première entrée
• choisir le fichier à la deuxième entrée (sera ajouté après l'étape 1)
• choisir le fichier à la troisième entrée (sera ajouté après l'étape 2)
• puis cliquez pour retirer le premier article dans lis t

attendu: retiré en premier élément, mais a supprimé la dernière ajouté

Answer 1

Use a key sur votre liste.

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

J'ai modifié votre violon pour générer un id pour chaque objet ajouté au tableau cornerList.

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) { 
 
\t 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>