to receive an array that I received through the axios

[primodeckers]

I want to receive an array that I received through the axios, but this one giving error. can you help me.

I'm trying to bind to the component,<vue-json-to-csv: jsonData = "data">

but this one giving error telling me that it is not an array my code:

<template>
    <vue-json-to-csv :jsonData="data"
  :labels="{
    id: { title: 'id' },
    co_tipo_nota: { title: 'co_tipo_nota' },
    ds_nota: { title: 'ds_nota' },
    ds_outro_criterio: { title: 'ds_outro_criterio' },
    ds_nofl_avaliacao_anonimata: { title: 'fl_avaliacao_anonima' },
    dt_nota: { title: 'dt_nota' },

  }"
  @success="val => handleSuccess(val)"
  @error="val => handleError(val)">
  <button>
    <b>My custom button</b>
  </button>
</vue-json-to-csv>
</template>

<script>

import VueJsonToCsv from 'vue-json-to-csv'
import { baseApiUrl } from '@/global'
import axios from 'axios'

export default {
     name: 'DowloadCvsThree',
     components: {
        VueJsonToCsv       
    },

    data: function() {
        return {
            nota: {},
            notas: []

        }
    },
    methods: {
        loadNotas() {
            const url = `${baseApiUrl}/notas`
            axios.get(url).then(res => {
                this.notas = res.data

            })
        },
    mounted() {
        this.loadNotas()
    }

 }
}
</script>

<style>

</style>

the error that occurs:

[Vue warn]: Property or method "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: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src/components/home/DowloadCvsThree.vue

at src/components/home/Home.vue at src/components/template/Content.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:587 warnNonPresent @ vue.runtime.esm.js?2b0e:1872 get @ vue.runtime.esm.js?2b0e:1914 render @ DowloadCvsThree.vue?bda4:9 Vue._render @ vue.runtime.esm.js?2b0e:4540 updateComponent @ vue.runtime.esm.js?2b0e:2784 get @ vue.runtime.esm.js?2b0e:3138 Watcher @ vue.runtime.esm.js?2b0e:3127 mountComponent @ vue.runtime.esm.js?2b0e:2791 Vue.$mount @ vue.runtime.esm.js?2b0e:7995 init @ vue.runtime.esm.js?2b0e:4133 createComponent @ vue.runtime.esm.js?2b0e:5604 createElm @ vue.runtime.esm.js?2b0e:5551 createChildren @ vue.runtime.esm.js?2b0e:5678 createElm @ vue.runtime.esm.js?2b0e:5580 patch @ vue.runtime.esm.js?2b0e:6087 Vue._update @ vue.runtime.esm.js?2b0e:2656 updateComponent @ vue.runtime.esm.js?2b0e:2784 get @ vue.runtime.esm.js?2b0e:3138 Watcher @ vue.runtime.esm.js?2b0e:3127 mountComponent @ vue.runtime.esm.js?2b0e:2791 Vue.$mount @ vue.runtime.esm.js?2b0e:7995 init @ vue.runtime.esm.js?2b0e:4133 createComponent @ vue.runtime.esm.js?2b0e:5604 createElm @ vue.runtime.esm.js?2b0e:5551 createChildren @ vue.runtime.esm.js?2b0e:5678 createElm @ vue.runtime.esm.js?2b0e:5580 patch @ vue.runtime.esm.js?2b0e:6087 Vue._update @ vue.runtime.esm.js?2b0e:2656 updateComponent @ vue.runtime.esm.js?2b0e:2784 get @ vue.runtime.esm.js?2b0e:3138 Watcher @ vue.runtime.esm.js?2b0e:3127 mountComponent @ vue.runtime.esm.js?2b0e:2791 Vue.$mount @ vue.runtime.esm.js?2b0e:7995 init @ vue.runtime.esm.js?2b0e:4133 createComponent @ vue.runtime.esm.js?2b0e:5604 createElm @ vue.runtime.esm.js?2b0e:5551 createChildren @ vue.runtime.esm.js?2b0e:5678 createElm @ vue.runtime.esm.js?2b0e:5580 patch @ vue.runtime.esm.js?2b0e:6087 Vue._update @ vue.runtime.esm.js?2b0e:2656 updateComponent @ vue.runtime.esm.js?2b0e:2784 get @ vue.runtime.esm.js?2b0e:3138 Watcher @ vue.runtime.esm.js?2b0e:3127 mountComponent @ vue.runtime.esm.js?2b0e:2791 Vue.$mount @ vue.runtime.esm.js?2b0e:7995 init @ vue.runtime.esm.js?2b0e:4133 createComponent @ vue.runtime.esm.js?2b0e:5604 createElm @ vue.runtime.esm.js?2b0e:5551 patch @ vue.runtime.esm.js?2b0e:6126 Vue._update @ vue.runtime.esm.js?2b0e:2656 updateComponent @ vue.runtime.esm.js?2b0e:2784 get @ vue.runtime.esm.js?2b0e:3138 Watcher @ vue.runtime.esm.js?2b0e:3127 mountComponent @ vue.runtime.esm.js?2b0e:2791 Vue.$mount @ vue.runtime.esm.js?2b0e:7995 (anonymous) @ main.js?2ee2:19 ./src/main.js @ app.js:5920 __webpack_require__ @ app.js:725 fn @ app.js:102 0 @ app.js:5933 __webpack_require__ @ app.js:725 (anonymous) @ app.js:792 (anonymous) @ app.js:795 vue.runtime.esm.js?2b0e:587 [Vue warn]: Invalid prop: type check failed for prop "jsonData". Expected Array, got Undefined. [Vue warn]: Invalid prop: type check failed for prop "jsonData". Expected Array, got Undefined. I will water the discussion 

[angeliquekom]

@primodeckers hi, thanks for sending me this issue. I think the issue occurs because data is not defined inside data. Also, you store the response from the API at the this.notas object instead this.data. It would be nice to use loading and error flags in order to check the API response, put loading/change visibility of the component while loading... So, I would propose to replace the template as below:

<vue-json-to-csv 
  v-if="!loading && !error"
  :jsonData="notas"
  :labels="{
    id: { title: 'id' },
    co_tipo_nota: { title: 'co_tipo_nota' },
    ds_nota: { title: 'ds_nota' },
    ds_outro_criterio: { title: 'ds_outro_criterio' },
    ds_nofl_avaliacao_anonimata: { title: 'fl_avaliacao_anonima' },
    dt_nota: { title: 'dt_nota' },

  }"
  @success="val => handleSuccess(val)"
  @error="val => handleError(val)">
  <button>
    <b>My custom button</b>
  </button>
</vue-json-to-csv>

data object:

data: function() {
        return {
            nota: {},
            notas: []
            loading: false,
            error: false
        }
    },

and the call:

this.loading = true
const url = `${baseApiUrl}/notas`
            axios.get(url).then(res => {
                this.notas = res.data
                this.error = false
                this.loading = false
            }).catch(error => {
               this.notas = []
               this.error = true
               this.loading = false
               console.log(error)
           })

I think it should be a nice idea to add an async feature at the module, I will have a look and create a new ticket for this.

Thanks! Please let me know if that works for you!