Home » vue » is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data

is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data

Posted by: admin November 26, 2021 Leave a comment

Questions:

This is DownloadExcel.vue:

<template>
    <div class="hello2">
    <button @click="downloadExcesl">Sffubmit</button>
    </div>
</template>

<script>
    import Vue from 'vue';
    import JsonExcel from 'vue-json-excel';

    Vue.component('downloadExcel', JsonExcel);

    export default {
        data() {
            return {
                json_fields: {
                    'Complete name': 'name',
                    'City': 'city',
                    'Telephone': 'phone.mobile',
                    'Telephone 2': {
                        field: 'phone.landline',
                        callback: (value) => {
                            return `Landline Phone - ${value}`;
                        }
                    },
                },
                json_data: [
                    {
                        'name': 'Tony Peña',
                        'city': 'New York',
                        'country': 'United States',
                        'birthdate': '1978-03-15',
                        'phone': {
                            'mobile': '1-541-754-3010',
                            'landline': '(541) 754-3010'
                        }
                    },
                    {
                        'name': 'Thessaloniki',
                        'city': 'Athens',
                        'country': 'Greece',
                        'birthdate': '1987-11-23',
                        'phone': {
                            'mobile': '+1 855 275 5071',
                            'landline': '(2741) 2621-244'
                        }
                    }
                ],
                json_meta: [
                    [
                        {
                            'key': 'charset',
                            'value': 'utf-8'
                        }
                    ]
                ],
            }
        }
    }
</script>

this is App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

<span>asdasdas</span>

      <download-excel

              :data   = "json_data"
              :fields = "json_fields"
              worksheet = "My Worksheet"
              name    = "filename.xls">

          Download Excel (you can customize this with html code!)
          <el-button type="warning">导出excel</el-button>
      </download-excel>

      <img src="download_icon.png">

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import DownloadExcel from './components/DownloadExcel'

export default {
  name: 'app',
  components: {
    HelloWorld,
    DownloadExcel

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

but console shows those errors:

      vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "json_data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: found in

    ---> <App> at src/App.vue
           <Root>

https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Same for json_fields and downloadExcesl

Please help me to solve this. How can I fix this? I searched a lot. But could not fix it.

Please help me to solve this. How can I fix this? I searched a lot. But could not fix it.

Please help me to solve this. How can I fix this? I searched a lot. But could not fix it.

This is also HelloWorld.vue:

Answers:

json_data and json_fields are both declared in your DownloadExcel.vue component data, not in your App.vue. Just remove it from the template declaration:

Or move it to App.vue

If you wish to pass both fields from the parent to the child, just declare it as a prop

I recommend you taking a look on how vue data flow works