Vue + Vuex 프로젝트에 Vega 차트를 포함하려고 하면 오류가 발생함

Vue + Vuex 프로젝트에 Vega 차트를 포함하려고 하면 오류가 발생함

Vue.js(상태관리용 vuex와 함께) 프로젝트에서 vega-embedded를 사용하려고 합니다.기본적으로 백엔드는 프런트엔드에 의해 HTTP GET 요청을 통해 클릭 이벤트를 통해 픽업되는 Vega json 객체를 제공합니다.그러나 플롯을 표시하려면 두 번 클릭해야 하며 첫 번째 클릭 이벤트가 항상 오류를 트리거합니다."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>

...및 store 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))
    }
  }

@TommyF의 코멘트 감사합니다.어떤 문서를 읽은 후에 해결책을 찾은 것 같습니다.(웹 앱 개발의 신참으로서)Vue몰랐어Vue스페셜 제공watch퍼실리티).컴포넌트 Vue 파일에서 메서드를 선언하는 대신displayVegaPlot명령하여 부르다watch베가 플롯을 바로 표시하도록 설정할 수 있습니다.vega_cars값을 변경합니다.

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

그리고 물론....mapState(['vega_cars'])투입할 필요가 있다computed.

언급URL : https://stackoverflow.com/questions/53327942/uncaught-error-when-trying-to-embed-a-vega-chart-in-vue-vuex-project