VueJS not creating Input Fields

Question

Anyone know why when I click on the addEditNewPOEntry it does not create a new row of empty inputs for the user to fill out?

<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: ''});
},

Here is the included data attached to the vue model.

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\"}]"

tony19 · Accepted Answer · 2022-07-16 01:13:43Z

0

Unfortunately we can't see the structure of your data, so I can't say for certain, but your issue is likely due to Vue list/object change detection caveats. Mutated objects/arrays may require replacement with a clone in order to ensure that the changes are detected correctly so that re-rendering may be triggered.

Edit
Given the structure of your data, I suspect that the issue is as I described. You're modifying a piece of data that is structured (roughly) as array => object => array. I'm honestly not sure which parts of this structure need to be forcefully detected, but the following lines would force the entire set of data to have its changes detected:

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

This is an incredibly inefficient way to force change detections, some of these steps are probably unnecessary, and I really don't recommend this approach if you can avoid it, but feel free to toy around with it and see if it makes things work. This is meant more to be an instructive experiment to help you narrow down the issue, understand the Vue object/list change detection caveats, and aid in further researching solutions. You're absolutely welcome to use the solution if it works, but be aware of potential performance issues on larger data sets.

edited Jul 16, 2022 at 1:13

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 5, 2017 at 19:30

B. Fleming

7,2601 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3732216 Over a year ago

I have edited my post above with the necessary data.

B. Fleming Over a year ago

@user3732216 I've updated my post. Please review it. I highly encourage you to spend a good amount of time researching the change detection caveats further rather than accepting the provided code snippet as-is.

Collectives™ on Stack Overflow

VueJS not creating Input Fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related