Uncaught error when trying to embed a Vega chart in Vue + Vuex project
I am trying to use vega-embed within a Vue.js (together with vuex for state management) project. Basically the backend serves a Vega json object which is picked up by the frontend via HTTP GET request with a click event. However I have to click twice to get the plot displayed and the first click event always triggers an error "Uncaught (in promise) TypeError: Cannot read property '$schema' of null". Can someone help me debug? Very much appreciated. Details shown below:
The vue component file:
<template>
<button @click.native="fetchCars(); displayVegaPlot()">fetch cars</button>
<div id="vega-example"></div>
</template>
<script>
import default as vegaEmbed from 'vega-embed'
import
mapState
from 'vuex'
export default
name: 'VegaExample',
props:
component_msg: String
,
methods:
fetchCars ()
this.$store.dispatch('fetchCars')
,
displayVegaPlot ()
vegaEmbed('#vega-example', this.vega_cars, actions: false)
,
computed:
...mapState([
'vega_cars'
])
</script>
... and the store js file:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
state:
error: '',
vega_cars: null
,
mutations:
SET_CARS: (state, cars) =>
state.vega_cars = cars
,
SET_ERROR: (state, error) =>
state.error = error
actions:
fetchCars: (context) =>
axios.get(`vega_cars`)
.then(response => context.commit('SET_CARS', response.data))
.catch(error => context.commit('SET_ERROR', error))
javascript vue.js vuex vega-lite
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
add a comment |
I am trying to use vega-embed within a Vue.js (together with vuex for state management) project. Basically the backend serves a Vega json object which is picked up by the frontend via HTTP GET request with a click event. However I have to click twice to get the plot displayed and the first click event always triggers an error "Uncaught (in promise) TypeError: Cannot read property '$schema' of null". Can someone help me debug? Very much appreciated. Details shown below:
The vue component file:
<template>
<button @click.native="fetchCars(); displayVegaPlot()">fetch cars</button>
<div id="vega-example"></div>
</template>
<script>
import default as vegaEmbed from 'vega-embed'
import
mapState
from 'vuex'
export default
name: 'VegaExample',
props:
component_msg: String
,
methods:
fetchCars ()
this.$store.dispatch('fetchCars')
,
displayVegaPlot ()
vegaEmbed('#vega-example', this.vega_cars, actions: false)
,
computed:
...mapState([
'vega_cars'
])
</script>
... and the store js file:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
state:
error: '',
vega_cars: null
,
mutations:
SET_CARS: (state, cars) =>
state.vega_cars = cars
,
SET_ERROR: (state, error) =>
state.error = error
actions:
fetchCars: (context) =>
axios.get(`vega_cars`)
.then(response => context.commit('SET_CARS', response.data))
.catch(error => context.commit('SET_ERROR', error))
javascript vue.js vuex vega-lite
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
You are neither waiting for the fetch synchronously nor checking yourvega_carsfor a value before using it invegaEmbed. Eitherawaityour fetch before callingdisplayVegaPlotor don't call it directly and use a watcher andif vega_cars != null.
– TommyF
Nov 15 '18 at 21:15
@TommyF When you referred usingawaitwere you talking about something like this:async fetchCars () let promise = new Promise((resolve, reject) => this.$store.dispatch('fetchCars'); resolve(); ) await promise; vegaEmbed('#vega-example', this.vega_cars, actions: false)I tried but still got the same behaviour...
– XiUpsilon
Nov 15 '18 at 22:03
1
That's because your store action is async and immediately returns, not after it received the server response (this is how it should be though). I'm not familiar with vega so it's hard to say what the best solution for adding reactivity would be, but I would eitherwatchvega_cars and when it's!= nullexecute your displayVegaPlot method or depending on where else you need vega_cars it might be more appropriate to fetch it locally in this component synchronously.
– TommyF
Nov 16 '18 at 7:00
add a comment |
I am trying to use vega-embed within a Vue.js (together with vuex for state management) project. Basically the backend serves a Vega json object which is picked up by the frontend via HTTP GET request with a click event. However I have to click twice to get the plot displayed and the first click event always triggers an error "Uncaught (in promise) TypeError: Cannot read property '$schema' of null". Can someone help me debug? Very much appreciated. Details shown below:
The vue component file:
<template>
<button @click.native="fetchCars(); displayVegaPlot()">fetch cars</button>
<div id="vega-example"></div>
</template>
<script>
import default as vegaEmbed from 'vega-embed'
import
mapState
from 'vuex'
export default
name: 'VegaExample',
props:
component_msg: String
,
methods:
fetchCars ()
this.$store.dispatch('fetchCars')
,
displayVegaPlot ()
vegaEmbed('#vega-example', this.vega_cars, actions: false)
,
computed:
...mapState([
'vega_cars'
])
</script>
... and the store js file:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
state:
error: '',
vega_cars: null
,
mutations:
SET_CARS: (state, cars) =>
state.vega_cars = cars
,
SET_ERROR: (state, error) =>
state.error = error
actions:
fetchCars: (context) =>
axios.get(`vega_cars`)
.then(response => context.commit('SET_CARS', response.data))
.catch(error => context.commit('SET_ERROR', error))
javascript vue.js vuex vega-lite
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
I am trying to use vega-embed within a Vue.js (together with vuex for state management) project. Basically the backend serves a Vega json object which is picked up by the frontend via HTTP GET request with a click event. However I have to click twice to get the plot displayed and the first click event always triggers an error "Uncaught (in promise) TypeError: Cannot read property '$schema' of null". Can someone help me debug? Very much appreciated. Details shown below:
The vue component file:
<template>
<button @click.native="fetchCars(); displayVegaPlot()">fetch cars</button>
<div id="vega-example"></div>
</template>
<script>
import default as vegaEmbed from 'vega-embed'
import
mapState
from 'vuex'
export default
name: 'VegaExample',
props:
component_msg: String
,
methods:
fetchCars ()
this.$store.dispatch('fetchCars')
,
displayVegaPlot ()
vegaEmbed('#vega-example', this.vega_cars, actions: false)
,
computed:
...mapState([
'vega_cars'
])
</script>
... and the store js file:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
state:
error: '',
vega_cars: null
,
mutations:
SET_CARS: (state, cars) =>
state.vega_cars = cars
,
SET_ERROR: (state, error) =>
state.error = error
actions:
fetchCars: (context) =>
axios.get(`vega_cars`)
.then(response => context.commit('SET_CARS', response.data))
.catch(error => context.commit('SET_ERROR', error))
javascript vue.js vuex vega-lite
javascript vue.js vuex vega-lite
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
asked Nov 15 '18 at 21:10
XiUpsilonXiUpsilon
6317
6317
You are neither waiting for the fetch synchronously nor checking yourvega_carsfor a value before using it invegaEmbed. Eitherawaityour fetch before callingdisplayVegaPlotor don't call it directly and use a watcher andif vega_cars != null.
– TommyF
Nov 15 '18 at 21:15
@TommyF When you referred usingawaitwere you talking about something like this:async fetchCars () let promise = new Promise((resolve, reject) => this.$store.dispatch('fetchCars'); resolve(); ) await promise; vegaEmbed('#vega-example', this.vega_cars, actions: false)I tried but still got the same behaviour...
– XiUpsilon
Nov 15 '18 at 22:03
1
That's because your store action is async and immediately returns, not after it received the server response (this is how it should be though). I'm not familiar with vega so it's hard to say what the best solution for adding reactivity would be, but I would eitherwatchvega_cars and when it's!= nullexecute your displayVegaPlot method or depending on where else you need vega_cars it might be more appropriate to fetch it locally in this component synchronously.
– TommyF
Nov 16 '18 at 7:00
add a comment |
You are neither waiting for the fetch synchronously nor checking yourvega_carsfor a value before using it invegaEmbed. Eitherawaityour fetch before callingdisplayVegaPlotor don't call it directly and use a watcher andif vega_cars != null.
– TommyF
Nov 15 '18 at 21:15
@TommyF When you referred usingawaitwere you talking about something like this:async fetchCars () let promise = new Promise((resolve, reject) => this.$store.dispatch('fetchCars'); resolve(); ) await promise; vegaEmbed('#vega-example', this.vega_cars, actions: false)I tried but still got the same behaviour...
– XiUpsilon
Nov 15 '18 at 22:03
1
That's because your store action is async and immediately returns, not after it received the server response (this is how it should be though). I'm not familiar with vega so it's hard to say what the best solution for adding reactivity would be, but I would eitherwatchvega_cars and when it's!= nullexecute your displayVegaPlot method or depending on where else you need vega_cars it might be more appropriate to fetch it locally in this component synchronously.
– TommyF
Nov 16 '18 at 7:00
You are neither waiting for the fetch synchronously nor checking your
vega_cars for a value before using it in vegaEmbed. Either await your fetch before calling displayVegaPlot or don't call it directly and use a watcher and if vega_cars != null.– TommyF
Nov 15 '18 at 21:15
You are neither waiting for the fetch synchronously nor checking your
vega_cars for a value before using it in vegaEmbed. Either await your fetch before calling displayVegaPlot or don't call it directly and use a watcher and if vega_cars != null.– TommyF
Nov 15 '18 at 21:15
@TommyF When you referred using
await were you talking about something like this: async fetchCars () let promise = new Promise((resolve, reject) => this.$store.dispatch('fetchCars'); resolve(); ) await promise; vegaEmbed('#vega-example', this.vega_cars, actions: false) I tried but still got the same behaviour...– XiUpsilon
Nov 15 '18 at 22:03
@TommyF When you referred using
await were you talking about something like this: async fetchCars () let promise = new Promise((resolve, reject) => this.$store.dispatch('fetchCars'); resolve(); ) await promise; vegaEmbed('#vega-example', this.vega_cars, actions: false) I tried but still got the same behaviour...– XiUpsilon
Nov 15 '18 at 22:03
1
1
That's because your store action is async and immediately returns, not after it received the server response (this is how it should be though). I'm not familiar with vega so it's hard to say what the best solution for adding reactivity would be, but I would either
watch vega_cars and when it's != null execute your displayVegaPlot method or depending on where else you need vega_cars it might be more appropriate to fetch it locally in this component synchronously.– TommyF
Nov 16 '18 at 7:00
That's because your store action is async and immediately returns, not after it received the server response (this is how it should be though). I'm not familiar with vega so it's hard to say what the best solution for adding reactivity would be, but I would either
watch vega_cars and when it's != null execute your displayVegaPlot method or depending on where else you need vega_cars it might be more appropriate to fetch it locally in this component synchronously.– TommyF
Nov 16 '18 at 7:00
add a comment |
1 Answer
1
active
oldest
votes
Thanks a lot for the comment from @TommyF, after some doc reading I think I figured out the solution (apparently as a newcomer to web app dev and Vue I didn't know Vue offers a special watch facility). So in the component Vue file, instead of declaring a method displayVegaPlot to call imperatively, a watch can be setup to do the display the Vega plot, as soon as vega_cars changes value:
watch:
vega_cars: (spec) =>
console.log('$store.state.vega_cars changed value')
if (spec)
vegaEmbed('#vega-example', spec, actions: false)
and of course ...mapState(['vega_cars']) needs to be put in computed.
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53327942%2funcaught-error-when-trying-to-embed-a-vega-chart-in-vue-vuex-project%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks a lot for the comment from @TommyF, after some doc reading I think I figured out the solution (apparently as a newcomer to web app dev and Vue I didn't know Vue offers a special watch facility). So in the component Vue file, instead of declaring a method displayVegaPlot to call imperatively, a watch can be setup to do the display the Vega plot, as soon as vega_cars changes value:
watch:
vega_cars: (spec) =>
console.log('$store.state.vega_cars changed value')
if (spec)
vegaEmbed('#vega-example', spec, actions: false)
and of course ...mapState(['vega_cars']) needs to be put in computed.
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
add a comment |
Thanks a lot for the comment from @TommyF, after some doc reading I think I figured out the solution (apparently as a newcomer to web app dev and Vue I didn't know Vue offers a special watch facility). So in the component Vue file, instead of declaring a method displayVegaPlot to call imperatively, a watch can be setup to do the display the Vega plot, as soon as vega_cars changes value:
watch:
vega_cars: (spec) =>
console.log('$store.state.vega_cars changed value')
if (spec)
vegaEmbed('#vega-example', spec, actions: false)
and of course ...mapState(['vega_cars']) needs to be put in computed.
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
add a comment |
Thanks a lot for the comment from @TommyF, after some doc reading I think I figured out the solution (apparently as a newcomer to web app dev and Vue I didn't know Vue offers a special watch facility). So in the component Vue file, instead of declaring a method displayVegaPlot to call imperatively, a watch can be setup to do the display the Vega plot, as soon as vega_cars changes value:
watch:
vega_cars: (spec) =>
console.log('$store.state.vega_cars changed value')
if (spec)
vegaEmbed('#vega-example', spec, actions: false)
and of course ...mapState(['vega_cars']) needs to be put in computed.
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
Thanks a lot for the comment from @TommyF, after some doc reading I think I figured out the solution (apparently as a newcomer to web app dev and Vue I didn't know Vue offers a special watch facility). So in the component Vue file, instead of declaring a method displayVegaPlot to call imperatively, a watch can be setup to do the display the Vega plot, as soon as vega_cars changes value:
watch:
vega_cars: (spec) =>
console.log('$store.state.vega_cars changed value')
if (spec)
vegaEmbed('#vega-example', spec, actions: false)
and of course ...mapState(['vega_cars']) needs to be put in computed.
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
edited Nov 16 '18 at 23:31
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
answered Nov 16 '18 at 23:22
XiUpsilonXiUpsilon
6317
6317
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
add a comment |
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
Please mark the question as answered when it works.
– dominik
Dec 18 '18 at 22:55
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53327942%2funcaught-error-when-trying-to-embed-a-vega-chart-in-vue-vuex-project%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You are neither waiting for the fetch synchronously nor checking your
vega_carsfor a value before using it invegaEmbed. Eitherawaityour fetch before callingdisplayVegaPlotor don't call it directly and use a watcher andif vega_cars != null.– TommyF
Nov 15 '18 at 21:15
@TommyF When you referred using
awaitwere you talking about something like this:async fetchCars () let promise = new Promise((resolve, reject) => this.$store.dispatch('fetchCars'); resolve(); ) await promise; vegaEmbed('#vega-example', this.vega_cars, actions: false)I tried but still got the same behaviour...– XiUpsilon
Nov 15 '18 at 22:03
1
That's because your store action is async and immediately returns, not after it received the server response (this is how it should be though). I'm not familiar with vega so it's hard to say what the best solution for adding reactivity would be, but I would either
watchvega_cars and when it's!= nullexecute your displayVegaPlot method or depending on where else you need vega_cars it might be more appropriate to fetch it locally in this component synchronously.– TommyF
Nov 16 '18 at 7:00