vue.jsがvueインスタンスオブジェクトと比較して正しく再レンダリングされない

Question

私のvueテンプレートには小さな問題があります。コードは以下の通りです：関数delete_finalは私のリストの最後の項目上で実行されると私のリストの最後の項目が削除されたよう

<template> 
<div class="panel panel-default" 
    v-bind:id="'panel_'+noeud.id"> 
    <div class="panel-heading">{{noeud.name}}</div> 
    <div class="panel-body"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Noeud</th> 
        <th>Poid</th>  
       </tr> 
      </thead> 
      <tbody> 
       <tr 
        v-for="noeud_poids in weightSorted" 
        v-if="noeud_poids.macro_zonning_noeud_id_2 != noeud.id" 
        is="macrozonningproximitenoeudpoids" 
        :noeud_poids="noeud_poids" 
        :noeud="noeud" 
        :noeuds="noeuds" 
        :delete_callback="delete_final" 
        :change_callback="update_line"> 
       </tr> 
       <tr> 
        <td> 
         <select v-model="new_noeud"> 
          <option value=""></option> 
          <option v-for="one_noeud in noeuds " 
           v-bind:value="one_noeud.id">{{one_noeud.name}}</option> 
         </select> 
        </td> 
        <td> 
         <input type="text" v-model="new_weight"> 
        </td> 
        <td> 
         <input type="button" class="btn btn-primary" @click="addNoeudProximite" value="Ajouter"/> 
        </td> 
       </tr> 

      </tbody> 
     </table> 

    </div> 
</div> 
</template> 

<script> 
    export default { 
     props: ['pnoeud', 'pnoeuds'], 

     data: function(){ 
      return { 
       points: 0, 
       points_restants: 100, 
       new_weight:0, 
       new_noeud:0, 
       noeud:this.pnoeud, 
       noeuds:this.pnoeuds, 
       weightSorted:this.pnoeud.weightSorted 
      } 
     }, 

     mounted() { 

     }, 

     methods:{ 

      delete_final(macro_zonning_noeud_id_2){ 
       axios.delete("/macrozonning/proximite/",{ 
        params:{ 
         macro_zonning_noeud_id_2:macro_zonning_noeud_id_2, 
         macro_zonning_noeud_id_1:this.noeud.id  
        } 
       }).then((res) => { 
        Vue.delete(this.weightSorted, String(macro_zonning_noeud_id_2));  
       }) 
      }, 

      update_line(nb_points){ 
       this.points_restants = this.points_restants - nb_points; 
       this.points = this.points + nb_points; 
      }, 


      addNoeudProximite(){ 
       axios.put('/macrozonning/proximite/', { 
        'macro_zonning_noeud_id_1': this.noeud.id, 
        'macro_zonning_noeud_id_2': this.new_noeud, 
        'weight': this.new_weight 
       }).then((res) => { 
        Vue.set(this.weightSorted, String(this.new_noeud), res.data); 
       }); 
      } 
     } 
    } 
</script> 

、ビューが正しく再レンダリングされます。しかし、私は私のリストの最初の項目を削除しようとすると、ビューがrerendersしかし、最後の項目が削除されています。 devtoolsのVueオブジェクトをチェックすると、新しいビューは反映されませんが、取り込まれたアクションが反映されます（最初のアイテムは削除されています）。

この問題がどこから来ているか分かっているなら、それはすばらしいでしょう。

どうもありがとうコミュニティ

Answer 1

では、古いリストに対するノードの新しいリストを差分の時ので、VUEが正確vノードを識別することができますv-forでレンダリングされている要素のkey属性を使用します。 key attribute

<tr> v-for="noeud_poids in weightSorted" :key="noeud_poids.id" </tr>