Update template with model changed from input vueJS

Question

I'm developing my first app in vueJs and laravel. now I 'have a problem with v-model. I have a page with component Person that edit or create new Person. So I get from my backend in laravel or Model Person or new Person.

Now in my frontend I pass data to component by props:

Page.blade.php

<Person :person-data="{!! jsonToProp($person) !!}"></Person>

(jsonToProp transform model coming from backend in json) In this case, I would return new Model so without properties, so $person will be a empty object.

Person.vue

<template>
<div>
    <label for="name_p"> Name</label>
    <input id="name_p" v-model="person.name" class="form-control" />
    <button v-on:click="test()">test</button>
    {{person.name}}
</div>
</template>
<script>
  export default {
        props: ['personData'],
        mounted() {
        },
        data() {
            return {
                person: this.personData
            }
        },
        methods:{
          test(){
             console.log(this.person.name);
          }
        }

    }
</script>

Now if I change input with model v-model="person.name" I would print name in template but it doesn't change. But if I click buttonit console write right value. So I read that changing model value is asynch, so How I can render new Model when change input?

I would suggest in created that you check to make sure all the properties you need are on the personData object, and if not, initialize them using $set. — Bert
– Bert, Commented Jul 27, 2017 at 19:59
Thankyou, but it mean that if I have for example 30 properties I should declare 30 property in created? :/ — LorenzoBerti
– LorenzoBerti, Commented Jul 28, 2017 at 6:56
The issue is that you are adding properties dynamically to an empty object. You can either start with an object that already has those properties or add them properly if you want them to be reactive. — Bert
– Bert, Commented Jul 28, 2017 at 7:06
Ok, I understand! thankyou! Now it Work, I have created my object from backend and in frontend I already have the correct properties that are reactive. Thankyou! — LorenzoBerti
– LorenzoBerti, Commented Jul 28, 2017 at 7:09

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You should declare all the properties up front, as per the documentation:

Why isn’t the DOM updating?

Most of the time, when you change a Vue instance’s data, the view updates. But there are two edge cases:

When you are adding a new property that wasn’t present when the data was observed. Due to the limitation of ES5 and to ensure consistent behavior across browsers, Vue.js cannot detect property addition/deletions. The best practice is to always declare properties that need to be reactive upfront. In cases where you absolutely need to add or delete properties at runtime, use the global Vue.set or Vue.delete methods.

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is just syntax sugar for arr.splice(index, 1, value).

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 27, 2017 at 16:06

Nora

3,2812 gold badges23 silver badges23 bronze badges

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

4 Comments

LorenzoBerti Over a year ago

Thankyou, but it mean that if I have for example 30 properties I should declare 30 property in created? :/ –

Nora Over a year ago

You can have a look here. You could use $set or Object.assign with a new object.

LorenzoBerti Over a year ago

Yes I saw, the problem is that i wouldn't reconstruct the object manually in frontend, but I 've resolved with backend and now it Work. Thankyou for reference!

Cody Gray Over a year ago

Just a friendly reminder, Nora, even though you're linking to documentation (and such links are less likely to rot), it's always recommended on Stack Overflow that you include the essential parts of the information from the link in your answer itself. I've done that for you already here, in response to a flag.

tony19 · Accepted Answer · 2022-07-16 03:20:48Z

0

That may be because your data, which comes from jsonToProp($person) does not reactive. You see, vue modify each object to make it 'reactive', some times you need to modify it by your own. detection caveats Try to do this.person = Object.assign({}, this.person, this.personData) in your mounted hook, to make it reactive.

edited Jul 16, 2022 at 3:20

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 27, 2017 at 16:11

Andrii Kudriavtsev

1,36413 silver badges20 bronze badges

1 Comment

Bert Over a year ago

This is the right idea, but if this.personData is an empty object as the question suggests, it won't help.

Collectives™ on Stack Overflow

Update template with model changed from input vueJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related