We Keep Coding

Vue array prop in child component not updating

I have a model from a backend where the property that normally contains an array of elements can be nullable. When this happens I'll init it to an empty array. However when doing that it seems to break my ability to update the array in the child component. Sample code can be found below.
Vue.component('Notes', {
template: '<div>{{items}}<ul><li v-for="item in items">{{ item.text }}</li></ul><button #click="add">Add</button></div>',
props: {
items: Array,
},
methods: {
add() {
console.log('added');
this.items.push({ text: "new item" });
}
}
});
new Vue({
el: "#demo",
data() { return { model: { } }},
created() { if(!this.model.items) this.model.items = []; }
});
<script src="https://unpkg.com/vue"></script>
<div id="demo">
<Notes :items="model.items" />
</div>
If data in the main component is model: { items : [] } everything works fine. But I don't have control over the backend data to guarantee that.

In your Notes component, you declare a model in the data, then, just underneath, you add an items[] if one doesn't exist already. This is not a good practice, and could be the cause of your problems. Vue needs to know about all the properties on objects it's watching. They need to be there when Vue first processes the object, or you need to add them with Vue.set().

You should emit an event to update the prop in the parent component
in child component :
this.$emit('add-item',{
text: "new item"
});
in parent template add a handler for the emitted event :
<Notes :items="model.items" #add-item="AddItem" />
Vue.component('Notes', {
template: '<div>{{items}}<ul><li v-for="item in items">{{ item.text }}</li></ul><button #click="add">Add</button></div>',
props: {
items: Array,
},
methods: {
add() {
console.log('added');
this.$emit('add-item', {
text: "new item"
});
}
}
});
new Vue({
el: "#demo",
data() {
return {
model: {
items: [] //init it here in order to avoid reactivity issues
}
}
},
methods: {
AddItem(item) {
this.model.items.push(item)
}
},
});
<script src="https://unpkg.com/vue"></script>
<div id="demo">
<Notes :items="model.items" #add-item="AddItem" />
</div>

Why doesn't my component template show up in Vue?

I've just started learning Vue. Now I'm trying to build my first component, but the template didn't show up, and the console didn't give me any error.
Here's some of my code:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
and here's a Jsbin with my full code

Your Vue instance needs a mounting id specified in the el property:
var vm = new Vue({
el: '#app', // Specifying a DOM id "app"
data() {
// ...
}
})
And the app template needs to be wrapped with that same id:
<div id="app">
<button-counter></button-counter>
</div>
Demo:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var vm = new Vue({
el: '#app',
data() {
return {
name:'yazid',
age:'20',
date:'press to known the date',
skills:['HTML','CSS','JS'],
ele:'<h1> elements from vue js</h1>',
completed_languages:[{
lang:'html',
percent:'90%'
},{
lang:'CSS',
percent:'70%'
},{
lang:'JS',
percent:'70%'
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button-counter></button-counter>
</div>

Vue.js: pass data from one child component to another with the same parent?

I have 2 components, both sharing a common parent. I want to be able to pass data from one child component to the other. (I am using vueJS 2)

The communication should be handled by the parent component as follows:
Child 1 sends the data to parent
this.$emit('myVarChanged', this.myVar);
The parent listens to the emits from the last, saves the new value, and pass it to the second child:
<ChildOneComponent #myVarChanged="updateMyVar" />
data() { return { myVar:null } }
methods: {
updateMyVar(val){
this.myVar = val;
}
}
<ChildTwoComponent :myVar="myVar" />
Child 2 gets the new value as props:
props: ['myVar']
Demo:
const child1 = Vue.component('child1', {
template: '#child1',
data() { return { count:0 } },
methods: {
updateParent() { this.$emit('myvarchanged', this.count++); }
}
});
const child2 = Vue.component('child2', {
template: '#child2',
props: ['myvar']
});
new Vue({
el:"#app",
components: { child1, child2 },
data() { return { myvar:null } },
methods: {
updateMyVar(val) { this.myvar = val; }
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="child1">
<div>
<h1>Child 1</h1>
<button #click="updateParent">Click to send to child 2</button>
</div>
</template>
<template id="child2">
<div>
<h1>Child 2</h1>
<p>Prop from child 1: {{myvar}}</p>
</div>
</template>
<div id="app">
<div><child1 #myvarchanged="updateMyVar" /></div>
<div><child2 :myvar="myvar" /></div>
</div>

change parent props from child component in vuejs2

I want to change the parent's prop's value from a child component. This works great in vuejs 1 but not in vue 2 (I want to use it in vue.js 2).
Here is a small example :
HTML
<div id="app">
<parent :content="{value:'hello parent'}"><</parent>
</div>
JavaScript
var parent = {
template: '<child :content="content"></child>',
props: ['content'],
};
var child = {
template: '<div>{{ content.value }}<button #click="change">change me</button></div>',
props: ['content'],
methods: {
change() {
this.content.value = "Value changed !";
}
}
};
Vue.component('child', child);
Vue.component('parent', parent);
new Vue({
el: '#app',
});
https://jsfiddle.net/f5gt94f2/

tl;dr: in vue2, you need to use the .sync modifier.
Create a local copy of the content prop in the parent's data (see reason here).
var parent = {
...
data() {
return {
localContent: this.content // creating a local copy, so we can mutate and react to it
}
}
};
Now, pass that localContent to the child, not content. And pass it using .sync so it can be updated:
var parent = {
template: '<div><child :content.sync="localContent"></child></div>',
... // ^^^^^^^^^^^^^^^^^^^^-- changed here
Now, in the child, don't assign to this.content.value, emit an update event instead:
var child = {
...
change() {
this.$emit('update:content', {value: "Value changed !"})
}
}
};
This event, with the new value, will be picked up by the parent and will update its localContent which also will, in consequence, update the child's content prop.
Final running code below.
var parent = {
template: '<div><child :content.sync="localContent"></child><br>At parent: {{ localContent }}</div>',
props: ['content'],
data() {
return {
localContent: this.content
}
}
};
var child = {
template: '<div>At child: {{ content.value }}<button #click="change">change me</button></div>',
props: ['content'],
methods: {
change() {
this.$emit('update:content', {value: "Value changed !"})
}
}
};
Vue.component('child', child);
Vue.component('parent', parent);
new Vue({
el: '#app'
});
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<parent :content="{value:'hello parent'}"></parent>
</div>

You will have to use emit events for this
Parent:
<child :content="content" #updateParent="updateValue"></child>
methods: {
updateValue (value) {
// Your code here
}
}
Child:
props: ['content'],
methods: {
change () {
this.$emit('updateParent', value)
}
}
https://v2.vuejs.org/v2/guide/components.html#Custom-Events

Vue2 & $refs & Cannot read property 'msg' of undefined

I use $refs to bind the child component but Can not get the value of child component from parent component thorough $ref.refname.msg. (I have tried $children which could work).
msg of child component has been defined.
msg info could be got through parent.$chidren.msg.
But the error showed that:
Uncaught TypeError: Cannot read property 'msg' of undefined.
Here's HTML code.
<template id="parent-component" ref='parent'>
<div>
<child-component1></child-component1>
<child-component2></child-component2>
<button v-on:click="showChildData">Show child component data</button>
</div>
</template>
<template id="child-component1" ref="cc1">
<div>
<span> This is child component 1.</span>
<button v-on:click="showParentData">Show parent component data</button>
</div>
</template>
<template id="child-component2" ref="cc2">
<div>
<span> This is child component 2.</span>
<button v-on:click="showParentData">Show parent component data</button>
</div>
</template>
<div id="e15">
<parent-component></parent-component>
</div>
Here's JavaScript:
Vue.component('parent-component',{
template: '#parent-component',
components: {
'child-component1': {
template: '#child-component1',
data: function(){
return {
msg: 'This is data of cc1'
};
},
methods: {
showParentData: function(){
alert(this.$parent.msg);
}
}
},
'child-component2': {
template: '#child-component2',
data: function() {
return {
msg: 'This is data of cc2',
num: 12
};
},
methods: {
showParentData: function(){
alert(this.$parent.msg);
}
}
}
},
data: function() {
return {
msg: 'This is data of parent.'
};
},
methods: {
showChildData: function(){
for(var i=0;i<this.$children.length;i++){
alert(this.$children[i].msg);
// console.log(this.$children[i]);
}
//!!!!This line doesn't work!!!
alert(this.$refs.cc2.msg);
}
}
});
var e15 = new Vue({
el: '#e15'
});
Code in JSFaddle

You should put ref="xx" on the child components, not the templates.
<child-component1 ref="cc1"></child-component1>
<child-component2 ref="cc2"></child-component2>
Templates are just templates, the parent component cannot ref to them.
Here is the official document for the usage of ref: https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs