Как исправить ошибку в проекте Vue?

Question

[panikev]

Здравствуйте! Ниже кусок кода

<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>

Подскажите пожалуйста, почему при добавлении {{tasks[0].title}}, при запуске проекта в консоли отображается ошибка "TypeError: Cannot read property 'querySelectorAll' of undefined". Если же я удаляю эту ссылку на элемент, то проект запускается.

Answer 1

[Алексей]

У вас хук mounted, объект data и export default не закрыты

Answer 2

[Константин Китманов]

Если вы во vue используете querySelector, вы, скорее всего, что-то делаете неправильно. В 99.9% случаев нужно использовать 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

[Александр]

Только учусь ... но есть подозрения )))
1. https://ru.vuejs.org/v2/api/#mounted
Обратите внимание, что mounted не гарантирует что все дочерние компоненты будут уже примонтированы. Если необходимо подождать пока не будут отрисованы все дочерние, можно воспользоваться vm.$nextTick внутри mounted

2. tasks: [{title: 'Default',}], В массив может записать что нибудь?
3. Код обрезанный ... синтаксис. Может ты не туда воткнул mounted().

Answer 4

[grinat]

По правде говоря это довольно дерьмовые чарты. Тут можешь посмотреть реализацию: https://github.com/apexcharts/vue-apexcharts/blob/...

Comments

[alex_kulkoff]

А почему дерьмовые? Какие лучше?

[grinat]

alex_kulkoff, косяков много, сложно конфигурируются. Лучше d3.js

[alex_kulkoff]

ну я юзаю обычные линейные, только использую vue-apexcharts. d3.js - сложные для новичка )

[grinat]

alex_kulkoff, они и для не новичка сложные. Просто находишь уже готовое и убираешь лишнее. Да и если график простой, то ничо не нужно, вуе умеет рендерить svg - https://medium.com/@simonwuyts/vue-js-and-d3-a-cha...