049 - VueJs .sync Modifier

by youssef moudine

HTML

<script type="text/javascript" src="https://unpkg.com/vue"></script>

<div id="app" style='border: 1px solid; padding: 1em'>
	<h4>app</h4>
	<pre>{{usersCount}}</pre>
	<my-component :parent_data.sync="usersCount"></my-component>
</div>

<script type="text/javascript">


	Vue.component('my-component', {
		'template': 
		`<div  style='border: 1px blue solid; padding: 1em'>
			<h4>child</h4>
			<pre>{{parent_data}}</pre>
			<input type="text" v-model="parent_data.child.prent_prop_1">
			<input type="text" v-model="parent_data.child.prent_prop_2">
		</div>`,
		'props': ['parent_data'],
		data(){
			return{
			}
		},
		mounted(){
			this.$emit('update:parent_data', this.parent_data);
		}
	});

	new Vue({
		'el':'#app',
		data: {
			usersCount: {
			child: {prent_prop_1: 1, 
			prent_prop_2:"eee"}
			
			}
		},
		watch:{
			usersCount(n, o){
				console.log(n)
			}
		}
	});
</script>