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 개체/목록 변경 감지 문제를 이해하고, 솔루션을 자세히 조사하는 데 도움이되는 유용한 실험이 될 것입니다. 작동하는 경우 솔루션을 사용하는 것을 절대적으로 환영하지만 대용량 데이터 세트에서 발생할 수있는 성능 문제를 알고 있어야합니다.