vuejs : заполнить цикл открывая модальное окно

[mstdmstd]

Всем привет,
В приложении laravel5.5/vue.js2.5 делаю модальное окно как описано тут
https://vuejs.org/v2/examples/modal.html

Пример работает, но только до того как мне нужно вывести в модальном окне список(assigningTasksListing) в цикле
Если написать цикл - то куча ошибок

assigningTasksListing выводится на странице нормально

Делаю:

<template>
<div >
<button id="show-modal" @click="show_new_tasks_modal_modal = true">Show Modal</button>
<newTasksModalDialog v-if="show_new_tasks_modal_modal" @close="show_new_tasks_modal_modal = false">
</newTasksModalDialog>
<!-- Template with dialog html definition -->
<script type="text/x-template" id="template_new_tasks_modal_dialog">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">

<div class="modal-header">
assigningTasksListing::{{ assigningTasksListing}} <!-- This data array is shown ok -->
default header
</div>

<div class="modal-body">
CONTENT
assigningTasksListing::{{ assigningTasksListing}} <!-- This data array is shown ok -->
<hr>
<ul>
<li v-for="nextAssigningTask in assigningTasksListing">
={{ nextAssigningTask.id }}
</li>
</ul>
<!-- Many errors like : Property or method "nextAssigningTask" is not defined on the instance but referenced during render. -->
<hr>
</div>

<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>

</div>
</div>

</div>
</transition>
</script> <!-- template_new_tasks_modal_dialog -->


</div>
</template>

<script>
import {bus} from '../../app';

// define the dialog component START
Vue.component('newTasksModalDialog', {
template: "#template_new_tasks_modal_dialog",


mounted: function () {
document.addEventListener("keydown", (e) => {
if (/*this.show &&*/ e.keyCode == 27) {
this.close();
}
});
}, // mounted: function () {

props: {
},

data() {
return {
title: '',
body: '',
}
}, // data() {


methods: {
close: function () {
this.$emit('close');
this.title = '';
this.body = '';
}

}, // methods: {

})
// define the dialog component END

export default {
data() {
return {
...
show_new_tasks_modal_modal: false,
assigningTasksListing:[]
}
},


mounted() {
},

methods: {


viewAssigningTasks() {
axios.get(window.API_VERSION_LINK + '/get_assigning_tasks_details').then((response) => {
this.assigningTasksListing = response.data.assigningTasksListing
this.show_new_tasks_modal_modal = true;
}).catch((error) => {
if (error.response.data.error_code == 11) {
this.showPopupMessage(error.response.data.message, 'error');
this.$router.push({path: '/'});
}
this.is_page_loaded = true
this.showRunTimeError(error, app);
});

},


} // methods: {

}


</script>

Метод viewAssigningTasks вызывается кликом на кнопке.
Совершенно непонятно почему внутри блока

<script type="text/x-template" ...

массив assigningTasksListing выводится полностью как одна переменная, но ошибка при обращении к переменной цикла...

Если убрать цикл

<li v-for="nextAssigningTask in assigningTasksListing">

то ошибки нет...

Или этот блок нужно определять как-то иначе ?

Спасибо!

 

[флоппик]

Я уже писал, вроде:
1. Перестань пытаться программировать логику на vue. Это — реактивный шаблонизатор, работай с данными и их отображением, не с логикой.
2. Дели на компоненты. Не пытайся разные логические куски запихать в один божественный компонент.
3. Пользуйся vue dev tools для отладки, не пихай вот эти дампы структур данных в шаблон.

И сразу все станет понятней.