[Vuejs]-Vue.js – One-way data binding updating parent from child

by

0👍

✅

If you wanted to, you could avoid this by creating a shallow copy and assigning it to a new data item in the child.

https://jsfiddle.net/6xxba1fz/

var test = {
  props: ['test'],
  data: function() {
  return {
    myTest: this.test.slice()
  }
  },
  mounted: function() {
    this.myTest.push(10)
  },
  render: function() {}
}

new Vue({
  el: '#app',
  components: {
    'test': test
  },
  data: function() {
    return {
      dataTest: []
    }
  }
})
👤Brian Glaz

1👍

Vue prevents you from assigning to a prop. It does not prevent you from calling a prop’s methods or modifying its elements or members, any of which can change the contents of the object. None of these things changes the value of the prop itself, which is a reference to an underlying structure.

A related issue is the fact that Vue cannot detect changes to Array elements or additions/deletions of Object members.

More here.

👤Roy J

-2👍

Please avoid to using the some name for key and value

:datatest="dataTest" Wrong Way

:data-test="dataTest" Better Way (use Kabab case)

HTML

<div id="app">
  <span>Parent value: {{ dataTest }}</span>
  <test :data-test="dataTest" />
</div>

JS

var test = {
  props: {
        dataTest:{
        type:Number
      }
  },
  mounted: function() {
    this.datatest.push(10)
  },
  render: function() {}
}

new Vue({
  el: '#app',
  components: {
    'test': test
  },
  data: function() {
    return {
      dataTest: []
    }
  }
})

Result:

Parent value: []

👤Omri Lugasi

Leave a comment