VueJSが入力フィールドを作成しない

Question

誰かがaddEditNewPOEntryをクリックしたときに、ユーザーが入力する空の入力の新しい行を作成しないのはなぜか分かりますか？

<div class="row" v-for="po in task.pos" :key="po.purchase_order"> 
    <div class="col-12 col-sm-6"> 
     <div class="form-group"> 
      <label class="control-label" for="po_number">Order Number:</label> 
      <input id="po_number" class="form-control" type="text" placeholder="Purchase Order" v-model="po.purchase_order" :key="po.id"> 
     </div> 
    </div> 
    <div class="col-12 col-sm-6"> 
     <div class="form-group"> 
      <label class="control-label" for="po_amount">Order: Amount:</label> 
      <input id="po_amount" class="form-control" type="text" placeholder="Purchase Amount" v-model="po.po_amount" :key=""> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <button class="btn btn-success btn-xs mb5 text-white" @click.prevent="addEditNewPOEntry(task)"><i class="fa fa-plus"></i> Add PO</button> 
    <button class="btn btn-warning btn-block btn-xs" v-on:click.prevent="saveEdit(task)">Done</button> 
</div> 


addEditNewPOEntry: function (task) { 
    task.pos.push({purchase_order: ' ', po_amount: ''}); 
}, 

ここには、vueモデルに付属するデータが含まれています。

data: 
    tasks:Array[1] 
     0:Object 
      id:40 
      name:"Test Name" 
      pos:Array[2] 
       0:Object 
       1:Object 
      purchase_order:"[{\"purchase_order\":\"afdasfd\",\"po_amount\":\"32.00\"}]" 

Answer 1

は、残念ながら、私たちはあなたのデータの構造を見ることができないので、私は確かに言うことはできませんが、あなたの問題は、Vue list/object change detection caveatsに思われます。突然変異したオブジェクト/アレイは、再レンダリングが引き起こされるように変更が正しく検出されるようにするために、クローンで置き換える必要があります。

編集
あなたのデータの構造を考えると、私は私が説明したような問題があると思われます。 array => object => arrayというように構造化されたデータを修正しています。私は正直に強制的に検出する必要がある。この構造の一部わからないんだけど、次の行は、その変更が検出持っているデータセット全体を強制する：

var this_vue_instance = this; 
this_vue_instance.tasks.forEach(function(task, task_index) { 
    task.pos.forEach(function(po, po_index) { 
     task.pos[po_index] = Object.assign({}, po); //forces individual po object to update 
    }); 
    task.pos = task.pos.slice(); //forces pos array to update 
    this_vue_instance.tasks[task_index] = Object.assign({}, task); //forces individual task object to update 
}); 
this_vue_instance.tasks = this_vue_instance.tasks.slice(); //forces tasks array to update 

これは、変更を強制的に非常に非効率的な方法です。これらのステップのいくつかはおそらく不必要なので、この方法を避けることができればこの方法をお勧めしませんが、周りをおもしろくして物事がうまくいくかどうかを確認してください。これは、問題の絞り込み、Vueオブジェクト/リストの変更検出に関する警告の理解、およびソリューションのさらなる調査の支援に役立つ参考になる実験であることを意味します。これが機能するなら、ソリューションを使用することは絶対に歓迎しますが、大規模なデータセットで潜在的なパフォーマンスの問題を認識しておいてください。