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对象/列表更改检测警告，并有助于进一步研究解决方案。如果可行的话，您绝对欢迎使用该解决方案，但请注意较大数据集的潜在性能问题。

VueJS没有创建输入字段

1 个答案: