Question

我正在尝试在Vue.js（以及用于状态管理的vuex）项目中使用vega-embed。基本上，后端提供了一个Vega json对象，该对象由前端通过带有click事件的HTTP GET请求进行拾取。但是，我必须单击两次才能显示该图，并且第一次单击事件始终会触发错误“ Uncaught (in promise) TypeError: Cannot read property '$schema' of null”。有人可以帮我调试吗？非常感谢。详细信息如下所示：

vue组件文件：

<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>

...以及商店js文件：

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))
    }
  }

Answer 1

非常感谢@TommyF的评论，在阅读了一些文档之后，我认为我已经找到了解决方案（显然，这是Web应用开发者的新手，而Vue我并不知道Vue的提议特殊的watch工具）。因此，在组件Vue文件中，无需声明要强制调用的方法displayVegaPlot，而是可以设置watch来显示Vega图，只要vega_cars更改值即可：< / p>

    watch: {
    vega_cars: (spec) => {
      console.log('$store.state.vega_cars changed value')
      if (spec) {
        vegaEmbed('#vega-example', spec, {actions: false})
      }
    }
  }

当然还有...mapState(['vega_cars'])必须放在computed中。

尝试在Vue + Vuex项目中嵌入Vega图表时出现未捕获的错误

1 个答案: