私はプロップリストを持つコンポーネントを持っています。リストは入力ファイルのリストです。一度入力が変更されたら、もう1つの入力を追加します。 削除しようとすると奇妙な動作です。VueJs2：コンポーネント内の親配列からアイテムを削除する
https://jsfiddle.net/apokjqxx/115/
removeAnother: function(item) {
var vm = this;
var num = vm.$parent.cornerList.indexOf(item);
vm.$parent.cornerList.splice(num, 1);
},
再現する方法：
は：最初の項目を削除したが、最後の削除リストに
Use a keyを追加しました。
<div v-for="(item, index) in list" :key="item.id">
私はcornerList配列に追加された各オブジェクトに対してidを生成するためにあなたのフィドルを修正。
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/[email protected]/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>