How to fix a bug in a Vue project?

Question

Vue.js

Hello! Below is a piece of code

<template>
<div class="col-sm">
        План составляет: {{tasks[0].title}}
      <div id="chart">
    </div>
     </div>
</template>
<script>
  export default {
        data() {
       return {
         tasks: [],
    },
 mounted(){
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>

Please tell me why when adding {{tasks[0].title}}, when starting the project, the error "TypeError: Cannot read property 'querySelectorAll' of undefined" is displayed in the console. If I remove this reference to the element, then the project is launched.

Answer 1

You have mounted hook, data object and export default are not closed

Answer 2

If you are using querySelector in vue, you are most likely doing something wrong. In 99.9% of cases, you should use ref :

<template>
  <div class="col-sm">
    План составляет: {{tasks[0].title}}
    <div ref="chart"></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tasks: [],
        };
    },
    mounted() {
        var chart = new ApexCharts(this.$refs.chart, options);
        chart.render();
    },
};
</script>

Answer 3

Just learning ... but I have my suspicions)))
1. https://ru.vuejs.org/v2/api/#mounted
2. tasks: [{title: 'Default',}], Can write something to the array?
3. Code truncated ... syntax. Maybe you stuck mounted() in the wrong place.

Answer 4

To be honest, these are pretty shitty charts. You can see the implementation here: https://github.com/apexcharts/vue-apexcharts/blob/...