VueJS nested data model

Question

I am relatively new to VueJS and am wondering how to nest/reference component's properties within others, so that the v-model binding will actually update them properly.

To illustrate, I am trying to do something like this.

Template:

<table>
    <tr v-for="field in myFields">
        <td class="label">{{field.label}}</td>
        <td class="user-control">
            <input v-model="field.model">
        </td>
    </tr>
</table>

Component:

export default {
    data () {
        return {
            myFields: [
                {
                    "label": "label",
                    "model": this.propertyOne
                },
                {
                    "label": "label",
                    "model": this.propertyTwo
                }
            ],
            propertyOne: "",
            propertyTwo: ""
        }
    }
}

In this example, I am expecting the template to render the propertyOne and propertyTwo values (e.g. empty string) in the inputs at first, and then have those values be updated when I change them via the input, like it would normally do with the v-model.

The first works, which means that if I set to propertyOne to "Foo", it gets used as the input value initially, but subsequent changes still don't update the properties. I would love for this to work so that I can leverage the power of the v-for hook instead of having to write down a massive static template if I have more than 10 fields.

tony19 · Accepted Answer · 2022-07-16 01:51:00Z

1

When you do: "model": this.propertyTwo this does not make sure that all subsequent changes to propertyTwo will be reflected in the model. To Achieve this there are few options available for you.

You can use watcher, so whenever propertyTwo will change you can execute a piece of code, like following:

watch: {
  // whenever propertyTwo changes, this function will run
  propertyTwo: function (newProp) {
    this.myFields[1].model = newProp
  }
},

You can also use Computed-Properties or method, which will be reactive if any associated data changes, they will execute.

edited Jul 16, 2022 at 1:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 8, 2017 at 3:00

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

5 Comments

Brendan B. Over a year ago

Thanks for the reply. The problem I am having is exactly this - since propertyTwo is bound to the input using the v-model directive via the "model" property of the object, changes made in the input value do not trigger the watcher on propertyTwo. I haven't tried with computed properties yet as I am pretty sure they are one-way binding so it would not solve the issue either, but maybe I am wrong.

Saurabh Over a year ago

@BrendanB. if you are using propertyTwo with v-model, it should trigger watchers, can you add that code or create a fiddle of it?

Brendan B. Over a year ago

you can see what I am trying to achieve in the initial post. I want to use the field.model in the v-model directive, instead of propertyTwo, so that I can use a v-for directive to loop over the data. If I were to use propertyTwo in the template, then the v-for would be useless as I would need to manually declare the properties bindings in the template, wouldn't I?

Saurabh Over a year ago

@BrendanB. So basically you can not bind propertyTwo to the input using the v-model directive via the "model" property of the object. You may define computed property other way around, where propertyTwo is a computed property and the function returns this.myFields[1].model

Brendan B. Over a year ago

Right, I'll try that and see if I can turn that thing around.

Collectives™ on Stack Overflow

VueJS nested data model

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related