Change dynamic nested json values

Question

this is my Json :

{
    "name": "table",
    raw_material: {
        "iron": 2,
        "wood": 1,
        "glue": 1
    }
}

Sometimes, it is different:

{
    "name": "table",
    raw_material: {
        "iron": 2,
        "plastic": 1,
        "glue": 1,
        "water":4
    }
}

I need to elaborate a form who will allow me to update any raw_material value, no matter the amount of key value . This is what I have :

<li v-for="(value, key, index) in this.item.raw_material" :key="index">
    {{ key }} : {{ value }} : {{ index }}
    <b-form-input v-model="value"></b-form-input>
</li>

The loop is ok . Unfortunatly, the value is not changed (2 ways binding) when I type something in the input field .

Any idea ?

score 0 · Answer 1 · answered Oct 28 '20 at 20:49

You should use key to bind a value to be able to edit it.

<li v-for="(value, key, index) in item.raw_material" :key="index">
    {{ key }} : {{ value }} : {{ index }}
    <b-form-input v-model="item.raw_material[key]"></b-form-input>
</li>

P.S. Don't use this in a component template it could lead to unexpected errors

Change dynamic nested json values

1 Answers1