Sync vue component form field and data value with prop sent in by vue parent component

Question

I got one vue component for Google Maps, where user can draw shapes on the map. In Google Maps component I am importing another "NewProperty" component which handles the form submission.

So, user would draw a shape on the map first and then fill in few more form fields. I would like to send the shape area (acres) from Google Maps component into NewProperty component and to be submitted with the form.

How do I automatically update the form field and data property in NewProperty component if acres prop changes? I am passing in an acres prop into the NewProperty component. I can see the prop value changing in NewProperty component, but I can't figure out how to make it so the prop also updates the data property. I can bind the prop to field value, but I also need so it updates the data property "form.acres". When the shape is done, before submitting the form, I would like to allow user to change the acreage if needed.

Below if a snippet of NewProperty component:

<template>
  <form>
     <input type="number" name="acres" :value="acres"        
     @input="form.acres = $event.target.value">
 </form>
</template>

<script>
    export default {
        name: "NewProperty",
        props: ['acres'],
        data() {
            return {
                form: new Form({
                    acres: '',
                })
            }
        }
    }
</script>

Any thoughts, how do I make the 3 pieces (prop, form field and data property) to stay in sync? I need only parent to child communication, it don't need to be both ways.

@Phil, my bad, I removed quite a few lines to make this post shorter. — Guntar

Guntar Guntar · Accepted Answer · 2019-11-12T04:13:35

Found one solution, using watch

watch: {
    acres: function(newVal, oldVal) {
        this.form.acres = newVal;
    }
},

Or ES6 style:

watch: {
    acres(newVal, oldVal) {
        this.form.acres = newVal;
    }
},

Credit goes to this post: How to listen for 'props' changes

Sync vue component form field and data value with prop sent in by vue parent component

1 Answers