Ошибка:
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.log('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, поэтому не уверен, что я сделал не так.
2 ответа
Проблема create () ловушка должна быть методом, а не объектом. Посмотрите это исправление рабочей песочницы 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.log('Error Fetching:', url, err);
return { 'failure': url, 'reason': err };
});
}
},
Ваш data
компонент должен быть объектом, а не функцией, вы должны заменить его, как показано ниже:
Также проверьте документ: декларативный рендеринг
data: {
return {
showExecs: false,
build_ids: []
}
Похожие вопросы
Новые вопросы
vue.js
Vue.js - это прогрессивная среда Javascript с открытым исходным кодом для создания пользовательских интерфейсов, которые стремятся к постепенному внедрению. Vue.js в основном используется для фронт-энда и требует промежуточного уровня HTML и CSS. Вопросы, связанные с версией Vue.js, должны быть помечены [vuejs2] или [vuejs3].