javascript - Vue.js - One-way data binding updating parent from child -


given colon indicates one-way-data-binding in vuejs2, understand why in example, child able update array declared in parent , passed child via prop (one-way).

https://jsfiddle.net/ecgxykrt/

<script src="https://unpkg.com/vue"></script>  <div id="app">     <span>parent value: {{ datatest }}</span>     <test :datatest="datatest" /> </div>  var test = {     props: ['datatest'],     mounted: function() {         this.datatest.push(10)     },     render: function() {} }  new vue({     el: '#app',     components: {         'test': test     },     data: function() {         return {             datatest: []         }     } }) 

thanks in advance!

if wanted to, avoid creating shallow copy , assigning new data item in 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: []     }   } }) 

Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -