Как исправить TypeError в созданном хуке vue.js?

ошибка:

vue.js:597 [Vue warn]: Error in created hook: "TypeError: handlers[i].call is not a function"

found in

---> <StageExecs>

vue.js

<div id = "vue-job">
    <div class = "row">
        <h3>test</h3>
        <stage-execs></stage-execs>
    </div>
</div>

<script>
    Vue.component('jobs', {
        delimiters: [ '[[', ']]' ],
        props: ['job'],
        data: function() {
                return {
                    showExecs: false,
                    build_ids: []
                }
            },
        created: {
            stageExecs() {
                url = "api/v2/exec?" + this.job.api_url + "&limit=10"
                fetch(url)
                    .then(response => response.json())
                    .then(body => {
                        for(i=0; i<body.length; i++){
                            this.build_ids.push({
                                'id': JSON.stringify(body[i].build_id),
                            })
                        }
                    })
                    .catch( err => {
                        console.info('Error Fetching:', url, err);
                        return { 'failure': url, 'reason': err };
                    });
                }
        },
        template: `
        <ul id = "example-1">
          <li v-for = "item in build_ids">
            [[ item.url ]]
          </li>
        </ul>
        `,
    });


var v_root = new Vue({
    delimiters: [ '[[', ']]' ],
    el: '#vue-job',
    data: {
        job_exec: {{ job_exec|safe }},

    }
});

Я предполагаю, что здесь что-то вызывается в неправильном порядке, но новичок в vue.js, поэтому не уверен, что я сделал неправильно.

что на линии 597? Кроме того, какой код в StageExecs сообщает об ошибке.

Trent 29.05.2019 01:40

строка 597 находится в самой библиотеке vue.js - так что понятия не имею, что это значит

david 29.05.2019 01:42

Итак, у вас есть собственный файл с именем vue.js?

Trent 29.05.2019 01:43

Ошибка указывает на StageExec - так что же в этом?

Trent 29.05.2019 01:43

также я обновил свой код с правильным пространством имен (теперь вы можете увидеть StageExecs)

david 29.05.2019 01:43
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
5
1 788
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

ваш компонент data должен быть объектом, а не функцией, вы заменяете его, как показано ниже:

пожалуйста, проверьте документ: Декларативный рендеринг

 data: {
     return {
         showExecs: false,
         build_ids: []
      }

Нет, этот синтаксис подходит для объекта Vue Instance — нужно возвращать только данные компонента. vuejs.org/v2/guide/instance.html

Trent 29.05.2019 01:52

@Trent функция ключевого слова в данных не имеет смысла, вместо этого это должен быть объект

Thamer 29.05.2019 01:55

Учитывая, что он установил пользовательские разделители, я предполагаю, что он пытается интегрировать vue в существующее приложение для рулей (усов), поэтому это значение устанавливается вне области действия. Но это все еще объект, и все в порядке. Ошибка была в хуке created()

Trent 29.05.2019 01:57

@Tren да, ты прав, мы не можем объявить функцию в созданном хуке

Thamer 29.05.2019 02:05
Ответ принят как подходящий

Проблема создана() хук должен быть методом, а не объектом. См. это исправление рабочей песочницы https://codesandbox.io/s/vue-template-e0dzj.

created() {
    url = "api/v2/exec?" + this.job.api_url + "&limit=10"
    fetch(url)
        .then(response => response.json())
        .then(body => {
            for(i=0; i<body.length; i++){
                this.build_ids.push({
                    'id': JSON.stringify(body[i].build_id),
                })
            }
        })
        .catch( err => {
            console.info('Error Fetching:', url, err);
            return { 'failure': url, 'reason': err };
        });
    }              
},

Так что это работает, но вводит новую ошибку, я собираюсь создать для этого новый пост.

david 29.05.2019 02:17

Ошибка в созданном хуке: «Ошибка типа: невозможно прочитать свойство «api_url» неопределенного»

david 29.05.2019 02:18

Где вы определили api_url? Свойство «job» в компоненте должно передавать объект, который содержит свойство с именем api_url.

Trent 29.05.2019 02:19

Другие вопросы по теме