VueJS - 入力ファイルリピータ

Question

配列からアイテムを削除したいが、同じアイテムがあり、最後に削除するアイテムがある！

let app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    items: [] 
 
    }, 
 
    methods: { 
 
    addItem() { 
 
     this.items.push(''); 
 
    }, 
 
    removeItem(index) { 
 
     this.items.splice(index, 1); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 
<div id="app"> 
 
    <ul class="list-group"> 
 
    <li class="list-group-item" v-for="(item , index) in items"> 
 
     <a href="#" v-on:click.prevent="removeItem(index)">remove</a> 
 
     <input name="form[]" type='file'> 
 
    </li> 
 
    </ul> 
 
    <button @click='addItem'>new item</button> 
 
</div>

JSFiddle：https://jsfiddle.net/6hvbqju2/

Answer 1

あなたのコード罰金しかし、 作業これは、ファイル入力、オートコンプリートの動作の

ある

012この例を参照してください。

let app = new Vue({ 
 
    el : '#app', 
 
    data : { 
 
    items: [], 
 
    }, 
 
    methods : { 
 
    addItem() { 
 
     this.items.push({file: null}); 
 
     console.log(this.items) 
 
    }, 
 
    removeItem(index) { 
 
     this.items.splice(index,1); 
 
    }, 
 
    handleChange(item, event){ 
 
     item.file = event.target.files["0"]; 
 
    } 
 
    } 
 
});

.upload-btn-wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.btn { 
 
    border: 1px solid gray; 
 
    color: gray; 
 
    background-color: white; 
 
    padding: 4px 10px; 
 
    border-radius: 4px; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
} 
 
.upload-btn-wrapper input[type=file] { 
 
    font-size: 100px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0; 
 
}

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <ul class="list-group"> 
 
    <li class="list-group-item" v-for="(item , index) in items"> 
 
     <a href="#" v-on:click.prevent="removeItem(index)">remove</a> 
 
     <div type="button" class="upload-btn-wrapper"> 
 
     <button class="btn">{{ item.file ? item.file.name : 'Choose File' }}</button> 
 
     <input name="form[]" type="file" @change="handleChange(item, $event)"> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    <button @click='addItem'>new item</button> 
 
</div>

Answer 2

要素のリストを扱うときにVueが「インプレースパッチ戦略」を使用しています。この戦略は、フォームの入力値に依存する場合には適していません。

v-forディレクティブを使用する場合は、v-bind:keyを定義して、Vueに各ノードを追跡するヒントを与える方がよいでしょう。

数字をitemsの配列に格納し、キーとして使用します。あなたのケースでは、ユニークなキーとして機能するアイテムのプロパティを使用する必要があります。

let app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    counter: 0, 
 
    items: [] 
 
    }, 
 
    methods: { 
 
    addItem() { 
 
     this.items.push(this.counter++); 
 
    }, 
 
    removeItem(index) { 
 
     this.items.splice(index, 1); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 
<div id="app"> 
 

 
    <ul class="list-group"> 
 
    <li class="list-group-item" v-for="(item , index) in items" :key="item"> 
 
     <a href="#" v-on:click.prevent="removeItem(index)">remove</a> 
 
     <input name="form[]" type='file'> 
 

 
    </li> 
 
    </ul> 
 
    <button @click='addItem'>new item</button> 
 

 

 
</div>