[Vuejs]-Change value of parent component variable using $parent but not reflected in interpolation syntax in vuejs

by

0👍

✅

Vue cannot detect when properties are added or removed from an object. Read Change Detection Caveats.

Define the property upfront:

data: {
  model: {
    foo: null
  }
}

this.$parent.model.foo = somevalue

If you need to add a property dynamically, then you need to use Vue.set.

👤Decade Moon

0👍

You should emit event from children and handle in parent instead of changing it directly in children. It will be easier for you to manage the data

For example

Child component

<template>
  <div>
    <h3>Child Component</h3>
  <div>
         <button @click="changeValue()">change Parent </button>
   </div>
 </div>
</template>

<script>
export default {
 data() {
    return{}
 },
 methods: {
  changeValue() {
    this.$emit('changeValue', someValue)
  }
 }
</script>

Parent component

<template>
  <div>
    <h3>Parent Component</h3>
   <div>
      {{model}}
  </div>
  <child-component @changeValue="changeValue" />
  </div>
</template>

<script>
export default {
  data() {
    return{
     model: {}
    }
  },
  methods: {
    changeValue (newValue) {
      this.model[someKey] = newValue
      this.model = JSON.parse(JSON.stringify(this.model))
    }
  }
 }
</script>
👤ittus

Leave a comment