We Keep Coding

Vue not reactive to nested data() changes?

My Vue 2 fails to react when an entry is added to an object returned by data(). I can make it work other way but would like to know the underlying reason. See also JSfiddle
var app = new Vue ({
el: "#app",
data() {
return {
addedRows: {
'section1': {}
}
}
},
methods: {
addToList(chapter) {
this.addedRows.section1[chapter] =
this.addedRows.section1[chapter] || []
this.addedRows.section1[chapter].push({'T': 'XXX'})
console.log(this.addedRows)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span #click="addToList('chapter1')">{{ addedRows }}</span>
</div>

Can't pass data from main.js to App.vue in Vue js?

In my main.js I do authentication and after that I populate a data property. I'm trying to pass that data property to the App component but seems not possible?
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
data: {
test: 'test'
},
//render: h => h(App)
render: h => h(App, { props: { 'test': this.test }})
}).$mount('#app')
App.vue
<template>
<div id="app" :test="test">
<h1>{{test}}</h1>
</div>
</template>
<script>
export default {
name: 'app',
props: ['test']
}
</script>
Just gives error as test and/or this.test is undefined. Passing a hard-coded value works. Without using props on the render line has no errors but App doesn't receive data. Am I just doing it wrong?

You can set render to a normal function in order for this to refer to the Vue instance:
render: function (h) {
return h(App, { props: { test: this.test } });
}

Your problem is that you're defining render as an anonymous arrow function. which means that it's this context isn't bind to you Vue instance. if you want a function's context to be the "hosting" object, you must define it with the function syntax.
new Vue({
data: {
test: 'test'
},
render(h) {
return h(App, { props: { 'test': this.test }})
}
}).$mount('#app')
you can read about arrow function vs regular functions here

Vue.js/Laravel: How to pass data between multiple components

require('./bootstrap');
window.Vue = require('vue');
Vue.component('exampleComponent1', require('./components/exampleComponent1.vue'));
Vue.component('exampleComponent2', require('./components/exampleComponent2.vue'));
const app = new Vue({
el: '#app'
});
from the above code, I want to pass data from exampleComponent1 to exampleComponent2 when some event has occurred in exampleComponent1.
What is the optimal solution for this ??

The key here is to set their parent component as the one receiving from the first (using emit) and sending to the second (using props):
const component1 = Vue.component('component1', {
template: '#component1',
data() { return { name: '' } },
methods: {
updateName() { this.$emit("namechanged", this.name); }
}
});
const component2 = Vue.component('component2', {
template: '#component2',
props: ['name'],
});
new Vue({
el: "#app",
components: { component1, component2 },
data() { return { name: '' } },
methods: {
updateName(newName) { this.name = newName; }
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div><component1 #namechanged="updateName"/></div>
<div><component2 :name="name"/></div>
</div>
<template id="component1"><input v-model="name" #input="updateName"/></template>
<template id="component2"><p>Input From component 1: {{name}}</p></template>

You can use a Event Bus for this.
// in some global file
const EventBus = new Vue();
// creating or emitting event
EventBus.$emit('someEvent', 'some-data')
// listen to the event
EventBus.$on('someEvent', function(data) {
console.log(data) // 'some-data
})

Vue.js - Single file component - Unknown custom element

I got a simple single-file component called "MobileApps.vue":
<template>
<div class="grey-bg about-page">
<p>{{ greetings }}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
greetings: "Hello"
}
}
};
</script>
And registering it:
const app = new Vue({
el: '#app',
router,
components: {
Home,
About,
Gas,
Electricity,
Contacts,
Electricity_info,
Gas_info,
MobileApps
},
data: {
},
created() {
},
destroyed() {
},
mounted() {
let mySVGsToInject = document.querySelectorAll('img.inject-me');
SVGInjector(mySVGsToInject);
},
methods: {
}
});
When I'm trying to open the HTML file with <MobileApps> component I'll get an error:
vue.esm.js:628 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
But even when I provide a name, nothing happens.

Try with cabeb-case format <mobile-apps> like :
<mobile-apps></mobile-apps>

VueJS Passing data Through render

I'm currently working with VueJS 2, I would like to pass some params from the HTML to the VueJS component. Let me show you.
My Html Div looks like this :
<div id="app" :id="1"></div>
And my javascript :
new Vue({
store, // inject store to all children
el: '#app',
render: h => h(App)
});
My App Component:
<template>
<div>
{{ id }}
</div>
</template>
<script>
export default {
props: {
id: Number
}
}
</script>
I would like to get the id passed in the Html, in my App component.
How should I do ?

Here is one way.
<div id="app" data-initial-value="125"></div>
new Vue({
el: '#app',
render: h => h(App, {
props:{
id: document.querySelector("#app").dataset.initialValue
}
})
})
But you don't have to use a render function.
new Vue({
el: '#app',
template:"<app :id='id'></app>",
data:{
id: document.querySelector("#app").dataset.initialValue
},
components:{
App
}
})
Also, I'm using querySelector assuming you rendered initialValue (instead of id) to the page as an attribute, but you could just as easily put it somewhere else on the page like a hidden input or something. Really doesn't matter.