<div class="content-chart">
<chart :type="'line'" :data="lineData" :options="options"></chart>
</div>
In the template section above, a component is defined to render a chart using Chart.js. The script below handles the logic.
<script>
import Chart from 'vue-bulma-chartjs'
import { Tabs, TabPane } from 'vue-bulma-tabs'
export default {
components: {
Chart
},
data () {
return {
persondata: {},
}
},
mounted () {
let parameter = this.$route.params.id
axios.get('/api' + parameter.toString()).then(response => {
this.persondata = response.data
})
},
computed: {
lineData () {
var sth = this.person.dates['date-values']
return {
labels: [9, 10, 11, 12, 13, 14, 15],
datasets: [{
data: sth,
label: 'Speed',
}]
}
}
}
</script>
As observed, this Vue component is used to display a chart on the page using Chart.js. However, an error occurs when attempting to access this.persondata.dates in the mounted() function, resulting in
"TypeError: this.persondata.dates is undefined"this.persondata with nested properties as shown below:
data () {
return {
persondata: {
dates: {
'date-values': []
}
}
}
}
Despite this, if the
response.data.dates['date-values']this.persondata.dates['date-values']dataset.data within the computed() function, the chart fails to render. This poses the question: What could be causing this issue?