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

Европа - быстрые серверы на дисках NVMe от $5 / Русский датацентр от 199руб

Тема в разделе "PHP & JavaScript & AJAX & JQUERY & HTML & FLASH", создана пользователем mstdmstd, 10 фев 2018.

  1. mstdmstd

    mstdmstd Новичок

    Сообщения:
    434
    Ваш город:
    Ivano-Frankivs'k, Ukraine
    Address:
    Ivano-Frankivs'k, Ukraine
    Country:
    Location on Map:
    Всем привет,
    В приложении 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">
    
    то ошибки нет...

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

    Спасибо!
     
  2. флоппик

    флоппик promotor fidei Команда форума Партнер клуба

    Сообщения:
    4.951
    Ваш город:
    Павлодар, Казахстан
    Address:
    Pavlodar, Kazakhstan
    Country:
    Location on Map:
    Я уже писал, вроде:
    1. Перестань пытаться программировать логику на vue. Это — реактивный шаблонизатор, работай с данными и их отображением, не с логикой.
    2. Дели на компоненты. Не пытайся разные логические куски запихать в один божественный компонент.
    3. Пользуйся vue dev tools для отладки, не пихай вот эти дампы структур данных в шаблон.

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