Vue array.spliceリストから間違ったアイテムを削除する

Question

私はリストを持っていますが、私はそれをループするforループを使用しています。構造は次のようになります。

salesLists: { 
    1: [ [], [], [] ] 
    2: [ [], [] ] 
} 

とHTML：

<div v-for="(saleLists, index) in salesLists"> 
    <my-comp v-for="(item, i) in saleLists" :key="i" :index="parseInt(i)+1"></my-comp> 
</div> 

は今、私はsalesLists[1]配列から項目を削除しようとしています。私は、任意のキーを指定しなかったとして、しかし、

removeForm(e) { 
     var index = parseInt(e.target.getAttribute('data-index')) - 1 // = 2 
     var client = e.target.getAttribute('data-client')    // = 1 
     //Vue.delete(this.salesLists[client], index); 
     this.salesLists[client].splice(index, 1) 
     this.$forceUpdate() 
} 

それはそれを削除し、それだけで空の配列（私は仮定）、それはDOMから右の要素を削除されていないのです。私はそのためのボタンや@click="removeForm"を持っています。それは2のインデックスを削除しますが、アイテムをループするのはv-forであり、カウントが減少するので、最後の最後のアイテムだけが削除されます。

この問題を解決する適切な方法は何ですか？ ：ここでは/

はフィドルです：https://jsfiddle.net/8rvfz40n/は、各入力フィールドに異なる値を書き込むと、中央の1つを取り外してみてください、あなたはそれが最後の1

Answer 1

を削除します表示されますこの1つは多くの人々をトリップおもう。

は私がhttps://forum.vuejs.org/t/solved-array-of-components-wrong-after-element-remove/11866/3

でしばらく前に VUEのフォーラムでこれに答えを書いているので、問題は、[、REC3 REC1、REC2]

あなたは配列を持っているこの

ですそのアレイの

キーがhoweve、あなたは1のインデックスにある項目を削除する場合は、値[REC1、 REC3]で配列を取得したい0、1、2

ですあなたがそれを削除した後に配列が のインデックスをスキップしないので、キーは[0、1]になります。テンプレートを作成すると、 キーが定義されていないため、最後の項目であるキーまたはインデックス2が存在しないため、 が削除され、 が削除されます。

はあなたがインデックスの代わりにアイテム listを使用して、意図したアイテム

あなたのケースで

https://jsfiddle.net/8rvfz40n/2/

をターゲットにしていることを確認する別の方法を見つける必要があり、それを解決するためにiます私はmentioすべき意図したアイテム

<div id="app"> 
    <div v-for="lists in xLists"> 
    <my-comp v-for="(list, i) in lists" :list="list"></my-comp> 
    </div> 
</div> 

---

を削除あなたが想像しているように、それは維持するのがより難しくなる可能性があります。

Answer 2

問題は実際にはかなり簡単です：xListsのオブジェクトキーへの参照を失うあなたの最初のループ。あなたがオブジェクトキーを格納し、小道具としてそれを渡す場合は、その参照を保持します：

<div v-for="(saleLists, index) in salesLists"> 
    <!-- index will refer to the object key --> 
    <my-comp v-for="(item, i) in saleLists" :key="i" :index="i+1" :sales-list-index=":index"></my-comp> 
</div> 

そして、あなたは単に小道具salesListIndexを取得し、あなたの中に正しいネストされた配列を指すようにキーとして使用することができますオブジェクト。あなたの実際の例のコンポーネントがどのように書かれているのかは明らかではありませんが、あなたのフィドル（私はアルファベットキーを使ってオブジェクトキーか配列キーかを知ることができましたが、実装上は同じです）

Vue.component('my-comp', { 
 
    props: ['index', 'value', 'listKey'], 
 
    template: ` 
 
    \t <div> 
 
    \t <p>xListsKey: {{ listKey }}, index: {{ index }}</p> 
 
    \t <input :value="value" /> 
 
     <button :data-index="index" @click="remove">del </button> 
 
    </div> 
 
    `, 
 

 
    methods: { 
 
    remove(e) { 
 
     var index = e.target.getAttribute('data-index'); 
 
     this.$parent.xLists[this.listKey].splice(index, 1) 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    xLists: { 
 
     'aa': [ 
 
     ['lorem'], 
 
     ['ipsum'], 
 
     ['dolor'] 
 
     ], 
 
     'bb': [ 
 
     ['foo'], 
 
     ['bar'] 
 
     ] 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue"></script> 
 

 
<div id="app"> 
 
    <div v-for="(lists, listKey) in xLists" :key="listKey"> 
 
    <my-comp v-for="(list, i) in lists" :key="i" :index="i" :value="list" :list-key="listKey"></my-comp> 
 
    </div> 
 
</div>

Answer 3

<div v-for="(saleLists, index) in salesLists"> 
    <my-comp v-for="(item, i) in saleLists" :key="i" :index="parseInt(i)+1"></my-comp> 
</div> 

キーとしてインデックスを使用することは、あなたが途中からアイテムを削除する際に失われたインデックスが最後で、問題となっています。

私の発見した解決策は、IDのような項目にユニークな "ハッシュ"を追加することですが、項目がニュースの場合、IDはnullです。

Hash: new Date().getTime() 

そして：私が使用

ハッシュは、タイムスタンプである

<div v-for="(saleLists, index) in salesLists"> 
    <my-comp v-for="(item, i) in saleLists" :key="item.Hash" :index="parseInt(i)+1"></my-comp> 
</div>