Develop Reference

VueJs + Axios + D3.js "Error: too late; already running"

I am trying to visualize some data with Vue-d3-charts.
I am getting the data asyncronously with axios.
The problem is that i am having issues with pushing the response data to the chart_data.
Either i get the error that my variable(buildingdata) with the response is undefined (probably because the response arrives later than everything else and therefore ) or Error in callback for watcher "datum": "Error: too late; already running.
Now i have confirmed that i am indeed getting a valid response by console logging the response to my browser.
What am i doing wrong?
Here is the vue code in my component
<template lang="pug">
div
.card
.card-body
//here is where the D3 component is
<D3BarChart :config="chart_config" :datum="chart_data" :title="chart_title"></D3BarChart>
</template>
<script>
import { D3BarChart } from 'vue-d3-charts';
import axios from "axios;
export default {
components: {
D3BarChart,
},
created(){
console.log("created function ran")
const sendGetRequest = async () => {
try {
let response = await axios.get("path_to_endpoint");
let buildingdata = response.data;
console.log(buildingdata)
//the code runs fine until i get here and try to push the response data to the chart_data.
this.chart_data.push(...buildingdata)
}
catch (error) {
console.log(error);
}
};
sendGetRequest();
},
data() {
console.log("data setup ran")
return {
chart_title: "Title",
// Chart data, this is where D3 gets its data from.
chart_data: [
],
// This is the chart config. it is from here you can change the chart type, colors, etc.
chart_config: {
key: 'name',
values: ['value'],
orientation: 'vertical',
},
}
},
}
</script>
Here is the output from my browser console
App mounted App.vue:35
data setup ran building.vue:36
created function ran building.vue:20
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html vue.esm.js:9132
Array(5) [ {…}, {…}, {…}, {…}, {…} ]
[Vue warn]: Error in callback for watcher "datum": "Error: too late; already running"
found in
---> <D3BarChart>
<OpenWoPerBuilding> at app/javascript/apps/new_insights/components/open_wo_per_building.vue
<App> at app/javascript/apps/new_insights/App.vue
<Root> vue.esm.js:628
VueJS 15
_callee$ open_wo_per_building.vue:26
tryCatch app.js:221
_invoke app.js:221
defineIteratorMethods app.js:221
asyncGeneratorStep app.js:235
_next app.js:237
(Async: promise callback)
asyncGeneratorStep app.js:235
_next app.js:237
_asyncToGenerator app.js:237
_asyncToGenerator app.js:237
sendGetRequest open_wo_per_building.vue:21
created open_wo_per_building.vue:32
VueJS 41
js app.js:12
(Async: EventListener.handleEvent)
js app.js:9
Webpack 7
Error: too late; already running
set schedule.js:42
tweenFunction tween.js:31
__WEBPACK_DEFAULT_EXPORT__ each.js:5
__WEBPACK_DEFAULT_EXPORT__ tween.js:67
__WEBPACK_DEFAULT_EXPORT__ attrTween.js:43
__WEBPACK_DEFAULT_EXPORT__ attr.js:74

You need to wait to have some data before displaying your component. The reason being that the template is synchronous and is not waiting for your data to be fetched.
This can be solved with a small v-if expecting your data to be fetched.
<D3BarChart v-if="asyncDataDoneLoading"
:config="chart_config"
:loaded="loaded"
:datum="chart_data"
:title="chart_title">
</D3BarChart>

So #kissu got me on the right track with the conditional rendering tip. What i did was use a flag that with a default of false in the "data()" that returns true after data has been fetched from axios in "created()".
<template lang="pug">
div(v-if="loaded")
.card
.card-body
<D3BarChart :config="chart_config" :loaded="loaded" :datum="chart_data" :title="chart_title"></D3BarChart>
</template>
<script>
import { D3BarChart } from 'vue-d3-charts';
import axios from "axios";
export default {
components: {
D3BarChart,
},
created(){
const sendGetRequest = async () => {
try {
let response = await axios.get("path_to_endpoint");
let buildingdata = response.data;
this.chart_data.push(...buildingdata)
this.loaded=true
}
catch (error) {
console.log(error);
}
};
sendGetRequest();
},
data() {
return {
loaded: false,
chart_title: "Title",
chart_data: [],
chart_config: {
key: 'name',
values: ['value'],
color: {name: '#7f3727'},
orientation: 'vertical',
},
}
},
}
</script>

Exported data is null when using it in another javascript vue js file

i am developing a shopify theme, currently i am working on shopping cart page, i have CartForm.js file where i am importing data from cartData.js file. This is CartForm.js...
import { store } from "./../shared/cartData.js";
if (document.querySelector('.cart-form')) {
let productForm = new Vue({
el:".cart-form",
delimiters: ['${', '}'],
data(){
return{
cart:null,
}
},
created(){
this.getCart();
},
methods:{
getCart(){
store.getCart();
this.cart=store.state.cartData;
console.log("cart data: "+this.cart);
},
and this is cartData.js file
export const store = {
state: {
cartData:null
},
getCart(){
alert("store get cart called!...")
axios.get('/cart.js')
.then( response => {
this.state.cartData=response.data;
console.log("Responsed data="+this.state.cartData);
})
.catch( error => {
new Noty({
type: 'error',
layout: 'topRight',
text: 'There was an error !!'
}).show();
});
}
}
As you can see i am explicitly calling store.getCart(); in CartForm's getCart() method, and when "Responsed data" gets printed it shows that this.state.cartData filled with data, but when i am using it like this: this.cart=store.state.cartData; this.cart is null, why is null? Any help is appreciated

This happens because your API takes a while to respond, but JavaScript continues running the function in parallel. Your state is still 'null' while the call hasn't returned, thus this.cart will be set to null, unless you tell JavaScript to wait until the call is finished.
Try making the getCart() method an asynchronous function:
methods:{
async getCart(){
await store.getCart();
this.cart=store.state.cartData;
console.log("cart data: "+this.cart);
},
If cart should always be the same as the data in your store, a better way to do this might be to use a computed property for cart. This returns the store.state directly and will help you keep a single source of truth for your data.
computed: {
cart() {
return store.state.cartData
}
}

Vuex store.watch behavior

I'm a Vuejs noob and i'm a bit stuck with Vuex store's watch function.
Here's my code for the store:
const storeconf: StoreOptions<any> = {
state: {
string: 'teststring'
},
actions:{
changeString({commit}):any{
commit('stringChange');
}
},
mutations:{
stringChange(state){
state.string=Math.random()+' root';
}
},
modules: {
mod:{
namespaced:true,
state:{
string:'modulestring'
},
actions:{
changeString({commit}):any{
commit('stringChange');
}
},
mutations:{
stringChange(state){
state.string=Math.random()+' module';
}
},
}
}
..and the app:
new Vue({
el: '#app',
store: store,
template:'<button #click="doActions">click</button>',
mounted(){
this.$store.watch(
state =>[state.string, state.mod.string],
watched => console.log(watched[0]+' -- '+watched[1]);
);
},
methods:{
doActions:function(){
this.$store.dispatch('mod/changeString')
this.$store.dispatch('changeString');
}
}
The point is that when i trigger the action on the root store the watcher works perfectly, but when i trigger the namespaced module one ( mod/changeString ) the watcher does nothing at all.
What's weird to me is that the namespaced action changes properly the store value, it just won't trigger the watcher..
What am I doing wrong?

thanksd it does indeed.
The real project I extracted this example from is in typescript, following this tutorial, and it seems the problem is that module property was set as optional and not initialized. It still logged the mutation and modified the state but did not trigger any watch. Kinda weird.

Emitting global events from websocket listener

I want to contribute to a project - it's written in Vue, and I am a beginner in Vue.
I have two components - Setup and MainApp
Both will need to update some state based on different messages from the websocket. Some websocket messages will affect the former, some the latter.
Vue doesn't know services, so I thought I'd just create a custom component, with empty <template>. instantiate the websocket there and then issue an this.emit() every time a new message occurs in the listener.
Both other components would listen to the emits and would be able to react.
Unfortunately, I can't get the websocket component to work.
main.js:
import Ws from './WsService.vue';
//other imports
const routes = [
//routes
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router
}).$mount('#app')
//I thought this to be the way to instantiate my webSocket service:
const WsService = new Vue({
el: '#WsService',
components: { Ws }
});
index.html
<body>
<div id="app">
<div id="WsService"></div>
<router-link to="/setup">Setup</router-link>
<router-link to="/main-app">Main App</router-link>
<router-view></router-view>
</div>
<script src="/dist/demo-app.js"></script>
</body>
the websocket "service":
<template>
</template>
<script>
const PORT_LOCAL = 9988;
var ws = new WebSocket("ws://localhost:" + PORT_LOCAL);
ws.onopen = function() {
ws.send('{"jsonrpc":"2.0","id":"reg","method":"reg","params":null}');
};
ws.onerror = function(e) {
console.log("error in WebSocket connection!");
console.log(e);
};
export default {
data() {
return {
}
},
created() {
var self = this;
ws.onmessage = function(m) {
var msg = JSON.parse(m.data);
switch(msg.id) {
// result for address request
case "reg":
self.$emit("reg_received", msg.result);
break;
case "send":
self.$emit("send_received", msg.result);
break;
case "subscribe":
self.$emit("subscribe_received", msg.result);
break;
default:
console.log(msg);
break;
}
}
},
methods: {
},
send(id, method, params) {
ws.send('{"jsonrpc":"2.0","id":"' + id + '","method":"' + method + '","params":null}');
}
}
}
</script>
Send for example from main app (this seems to work):
import WsSvc from './WsService.vue';
export default {
data() {
//
},
subscribe() {
let jsonrpc = "the jsonrpc string";
WsSvc.send(jsonrpc);
}
}
Listening to emit:
export default {
data() {
//
},
created() {
this.$on("reg_received", function(result){
//do smth with the result
});
}
}
Wit this configuration, the created hook actually never gets called - and thus I'll never hit the onmessage listener. The reason to have a custom component I thought was that I would have access to the emit function.
It feels I am making it more complicated than it should be but I haven't managed yet to get it right. The solution doesn't need to follow this approach.

There's no need for a socket specific component in this case. What I have done in the past on a couple projects is implement an API or store object that handles the socket messages and then import that API or store into the components that need it. Also in a similar answer, I show how to integrate a WebSocket with Vuex.
Here is an example that combines the concept of using Vue as an event emitter with a web socket that can be imported into any component. The component can subscribe and listen to the messages it wants to listen to. Wrapping the socket in this way abstracts the raw socket interface away and allows users to work with $on/$off subscriptions in a more typically Vue fashion.
Socket.js
import Vue from "vue"
const socket = new WebSocket("wss://echo.websocket.org")
const emitter = new Vue({
methods:{
send(message){
if (1 === socket.readyState)
socket.send(message)
}
}
})
socket.onmessage = function(msg){
emitter.$emit("message", msg.data)
}
socket.onerror = function(err){
emitter.$emit("error", err)
}
export default emitter
Here is an example of that code being used in a component.
App.vue
<template>
<ul>
<li v-for="message in messages">
{{message}}
</li>
</ul>
</template>
<script>
import Socket from "./socket"
export default {
name: 'app',
data(){
return {
messages: []
}
},
methods:{
handleMessage(msg){
this.messages.push(msg)
}
},
created(){
Socket.$on("message", this.handleMessage)
},
beforeDestroy(){
Socket.$off("message", this.handleMessage)
}
}
</script>
And here is a working example.

Hey this should work for you better and easy
This my example with .vue file
yourVueFile.Vue
<template>
// key in your template here
</template>
<script>
export default {
//use the created() option to execute after vue instance is created
created() {
let ws = new WebSocket("yourUrl");
ws.onopen = e => {
ws.send(
JSON.stringify({ your json code })
);
ws.onmessage = e => {
let data = JSON.parse(e.data);
// the this.$data get your data() options in your vue instance
this.$data.dom = data;
};
};
},
data() {
return {
dom: core
};
},
methods: {
}
};
</script>

Vue.js - Global Data from AJAX Call

I'm giving Vue.js a try and so far I'm loving it because it's much simpler than angular. I'm currently using vue-router and vue-resource in my single page app, which connects to an API on the back end. I think I've got things mostly working with a the primary app.js, which loads vue-router and vue-resource, and several separate components for each route.
Here's my question: How do I use props to pass global data to the child components when the data is fetched using an asynchronous AJAX call? For example, the list of users can be used in just about any child component, so I would like the primary app.js to fetch the list of users and then allow each child component to have access to that list of users. The reason I would like to have the app.js fetch the list of users is so I only have to make one AJAX call for the entire app. Is there something else I should be considering?
When I use the props in the child components right now, I only get the empty array that the users variable was initialized as, not the data that gets fetched after the AJAX call. Here is some sample code:
Simplified App.js
var Vue = require('vue');
var VueRouter = require('vue-router')
Vue.use(VueRouter);
var router = new VueRouter({
// Options
});
router.map({
'*': {
component: {
template: '<p>Not found!</p>'
}
},
'/' : require('./components/dashboard.js'),
});
Vue.use(require('vue-resource'));
var App = Vue.extend({
ready: function() {
this.fetchUsers();
},
data: function() {
return {
users: [],
};
},
methods: {
fetchUsers: function() {
this.$http.get('/api/v1/users/list', function(data, status, response) {
this.users = data;
}).error(function (data, status, request) {
// handle error
});
}
}
});
router.start(App, '#app')
Simplified app.html
<div id="app" v-cloak>
<router-view users = "{{ users }}">
</router-view>
</div>
Simplified dashboard.js
module.exports = {
component: {
ready: function() {
console.log(this.users);
},
props: ['users'],
},
};
When dashboard.js gets run, it prints an empty array to the console because that's what app.js initializes the users variable as. How can I allow dashboard.js to have access to the users variable from app.js? Thanks in advance for your help!
p.s. I don't want to use the inherit: true option because I don't want ALL the app.js variables to be made available in the child components.

I believe this is actually working and you are being misled by the asynchronous behavior of $http. Because your $http call does not complete immediately, your console.log is executing before the $http call is complete.
Try putting a watch on the component against users and put a console.log in that handler.
Like this:
module.exports = {
component: {
ready: function() {
console.log(this.users);
},
props: ['users'],
watch: {
users: {
handler: function (newValue, oldValue) {
console.log("users is now", this.users);
},
deep: true
}
}
}
};

In the new version of Vue 1.0.0+ you can simply do the following, users inside your component is automatically updated:
<div id="app" v-cloak>
<router-view :users="users"></router-view>
</div>