Problem Description

Since the definition of a componentcomponent to parent component calls, data capabilities are quite normal, but the browser console will get an error:

[Vue warn]: Error in render: "TypeError: Cannot read property 'g1' of undefined"

found in

---> <Gauge> at src/components/Gauge.vue
       <BTab>
         <BTabs>
           <Home> at src/views/Home.vue
             <App> at src/App.vue
               <Root>

Parent component

Call Gaguethe component when its attributes gdataincoming data type Objectof gague1data

<template>
	<div>
		<gauge :gdata="gague1"></gauge>
	</div>
</template>
<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'
  import Gauge from '../components/Gauge'

  export default {
    components: {
      'v-chart': ECharts,
      'gauge': Gauge,
    },
    data () {
      return {       
        gague1: {
            g1: {
              min: -100,
              max: 100,
              data: [
                {
                  name: '数据1',
                  value: 3.5,
                }],
            }
       }
    // ...
  }
</script>

Subassembly`Gauge.vue`

<template>
    <b-row>
        <b-col md="4">
            {{ gdata.g1}}
            <v-chart></v-chart>
        </b-col>
        <b-col md="4">
            内同2
        </b-col>
        <b-col md="4">
            内同3
        </b-col>
    </b-row>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/gauge'

  export default {
    name: 'Gauge',
    components: {
      'v-chart': ECharts,
    },
    props: ['gdata']
  }
</script>

<style scoped>

</style>

Solution

Issue of reference on Github: https://github.com/vuejs/vue/issues/1032

Subassembly Gauge.vuedefined attributes propswhen adding the default value can be, using the arrow syntax for ES6

props: {
      gdata: {
        type: Object,
        default: () => {
          return {
            g1: {},
          }
        },
      },
    },

supplement

We turn to this article:

https://juejin.im/post/5c408be9f265da614f709043

Ajax asynchronous request for such a cause of the error is actually returned because the results did not catch up with the rendering dom node. So you can make changes in two ways: First, the variable returns the result of the assignment, the other is rendered levels dom node.

Variable assignment given initial value, i.e. the definition menu_items: [{fullname: ''}]. The benefit of this is to render the page node is not restricted to return results, the static copy will still be rendered, dynamic data will be filled in when data is updated. To the user the feeling is that the page rendering speed is good. But this approach also has shortcomings, the background returns data fields are not the same, and if so write it all really in trouble. Of course, if you use typescript no such trouble, menu_items: {[propName: string]: any} = {} to get.

v-if, dom mounted control node, if and only if the returned value is given menu_items, began to render nodes. The benefit of this is that static and dynamic copy synchronized show in front of the user, there will be no beating copywriting, data process from scratch. However, the side effect is the page rendering time, user wait time becomes longer.