@panikev

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

Здравствуйте! Ниже кусок кода
<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". Если же я удаляю эту ссылку на элемент, то проект запускается.
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 4
@AleksRap
У вас хук mounted, объект data и export default не закрыты
Ответ написан
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Если вы во 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>
Ответ написан
@UPSA
anykey
Только учусь ... но есть подозрения )))
1. https://ru.vuejs.org/v2/api/#mounted
Обратите внимание, что mounted не гарантирует что все дочерние компоненты будут уже примонтированы. Если необходимо подождать пока не будут отрисованы все дочерние, можно воспользоваться vm.$nextTick внутри mounted

2. tasks: [{title: 'Default',}], В массив может записать что нибудь?
3. Код обрезанный ... синтаксис. Может ты не туда воткнул mounted().
Ответ написан
@grinat
По правде говоря это довольно дерьмовые чарты. Тут можешь посмотреть реализацию: https://github.com/apexcharts/vue-apexcharts/blob/...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы