Laravel по-русски
Laravel по-русски
Русское сообщество разработки на PHP-фреймворке Laravel.
Ты не вошёл. Вход тут.
Страницы 1
Всем привет,
Делая статусную строку внизу приложения(laravel5.5/vue.js2.5) в конце блока обработки vue вставил компонент:
resources/views/layouts/app.blade.php
<div id="app">
...
@yield('content')
...
<status-line></status-line>
</div> <!-- id="app">-->В resources/assets/js/components/lib/StatusLine.vue при клике на кнопке(метод viewAssigningTasks) считываю данные в массив assigningTasksListing с сервера
и передаю в событие setAssigningTasksListingEvent полученные данные. Кроме массива передаю две скалярные переменные(title и body) для примера.
В компоненте модального окна StatusLine.vue слушаю событие setAssigningTasksListingEvent и в его обработчике открываю модальное окно присваиванием :
this.show_new_tasks_modal_modal= true;Шаблон темплейта заполняю как строку, предварительно в переменной сформировав цикл для всех строк assigningTasksListing, что я хотел отобразить :
var assigningTasksListingHTML=
'<div class="row"> assigningTasksListing::{{ assigningTasksListing }}<br><br><hr> <ul><li v-for="nextAssigningTask,index in assigningTasksListing">{{nextAssigningTask.id}}={{nextAssigningTask.task_name}} of </li></ul></div>';
console.log("-2 assigningTasksListingHTML:::")
console.log(assigningTasksListingHTML)
Vue.component('newTasksModalDialog', {
template: '\n' +
...Итого модально окно открывается и выводится массив assigningTasksListing который я вывожу на экран
Инпуты со значениями title и body выводятся правильно, но не работает вывод массива assigningTasksListing в цикле.
Просто переменные в цикле не выводятся. На странице есть один вывод :
= of - это константы что я вывожу между переменными. Если в цикле написать неправильную переменную - то в консоле куча ошибок.
Это как-то можно исправить ?
Ниже шаблон компонента:
<template>
<div class="row">
...
<span v-if="assigning_tasks_count > 0">
| <i class="glyphicon glyphicon-tasks red"></i> <a href="#" @click.prevent="viewAssigningTasks">{{ assigning_tasks_count }} New tasks</a>
</span>
...
<newTasksModalDialog v-show="show_new_tasks_modal_modal" @close="show_new_tasks_modal_modal = false" bus="bus">
<h4 slot="header">New tasks assigned to you</h4>
<p slot="footer" class="text-info">You have to accept or cancel these tasks</p>
</newTasksModalDialog>
</div>
</template>
<script>
import {bus} from '../../app';
// DEFINE THE NEW TASKS MODAL DIALOG COMPONENT START
var assigningTasksListingHTML=
'<div class="row"> assigningTasksListing::{{ assigningTasksListing }}<br><br><hr> <ul><li v-for="nextAssigningTask,index in assigningTasksListing">{{nextAssigningTask.id}}={{nextAssigningTask.task_name}} of </li></ul></div>';
console.log("-2 assigningTasksListingHTML:::")
console.log(assigningTasksListingHTML)
Vue.component('newTasksModalDialog', {
template: '\n' +
' <div class="modal-mask" @click="close" >\n' + // v-show="show"
' <div class="modal-wrapper" >\n' +
' <div class="modal-container" @click.stop>\n' +
'\n' +
' <div class="modal-header">\n' +
' <slot name="header">\n' +
' default header\n' +
' </slot>\n' +
' </div>\n' +
'\n' +
' <div class="modal-body">\n' + assigningTasksListingHTML +
' <div class="row" >'+
' <label class="form-label">\n' +
' Title\n' +
' <input v-model="title" class="form-control">\n' +
' </label>\n' +
' </div>\n' +
' <div class="row" >'+
' <label class="form-label">\n' +
' Body\n' +
' <textarea v-model="body" rows="5" class="form-control"></textarea>\n' +
' </label>'+
' </div>\n' +
' </div>\n' +
'\n' +
' <div class="modal-footer">\n' +
' <slot name="footer">\n' +
' default footer\n' +
' <button class="modal-default-button" @click="$emit(\'close\')">\n' +
' OK\n' +
' </button>\n' +
' </slot>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n',
created() {
bus.$on('setAssigningTasksListingEvent', (assigningTasksListing) => {
this.title= 'Set New title value 1:'+(new Date)
this.body= 'Set New body value 2:'+(new Date)
this.assigningTasksListing = assigningTasksListing
})
},
mounted: function () {
...
}, // mounted: function () {
data() {
return{
show: false,
title: 'Default title value',
body: 'Default body value',
assigningTasksListing:['Default assigningTasksListing value']
}
}, // data() {
})
// DEFINE THE NEW TASKS MODAL DIALOG COMPONENT END
export default { // StatusLine.vue
data: function () {
return {
...
show_new_tasks_modal_modal: false,
}
}, // data: function () {
mounted() {
}, // mounted() {
methods: {
viewAssigningTasks() {
axios.get(window.API_VERSION_LINK + '/get_assigning_tasks_details').then((response) => {
bus.$emit('setAssigningTasksListingEvent', {
'assigningTasksListing': response.data.assigningTasksListing
}); // this resources/assets/js/components/user_chats/UserChatsRun.vue file will receive it
this.show_new_tasks_modal_modal= true;
})
},
} // methods: {
}Спасибо !
Не в сети
По-прежнему ищу решение : пробую теймплейт определить как отдельный див с ссылкой на него в определении компонента:
<template>
<div>
<button id="show-modal" @click="showModal = true">Show Modal</button>
<modal v-if="showModal" @close="showModal = false">
</modal>
<div id="template_1" class="modal-mask" v-if="showModal">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
default header
</div>
<div class="modal-body">
CONTENT
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// define the dialog component START
Vue.component('modal', {
template: "#template_1",
mounted: function () {
document.addEventListener("keydown", (e) => {
if (/*this.show &&*/ e.keyCode == 27) {
this.close();
}
});
}, // mounted: function () {
data() {
return {
show: false,
}
}, // data() {
methods: {
close: function () {
this.$emit('close');
}
}, // methods: {
})
// define the dialog component END
export default {
data() {
return {
showModal: false,
}
},
mounted() {
},
methods: {}
}
</script>Частично работает - то есть при клике на “Show Modal” кнопке модальное окно открывается Но в консоле ошибка :
app.js:1964 [Vue warn]: Cannot find element: #template_1
warn @ app.js:1964
query @ app.js:6607
(anonymous) @ app.js:12104
cachedFn @ app.js:1540
Vue$3.$mount @ app.js:12130
init @ app.js:5449
createComponent @ app.js:6896
createElm @ app.js:6844
updateChildren @ app.js:7133
patchVnode @ app.js:7224
patch @ app.js:7384
Vue._update @ app.js:4031
updateComponent @ app.js:4149
get @ app.js:4499
run @ app.js:4576
flushSchedulerQueue @ app.js:4338
(anonymous) @ app.js:3197
flushCallbacks @ app.js:3118
14:09:14.909 app.js:1964 [Vue warn]: Template element not found or is empty: #template_1
found in
---> <Modal>
<DialogTest> at resources/assets/js/components/DialogTest.vue
<Root>И чтобы модальное окно не было видимо при открытии окна я поставил условие :
<div id="template_1" class="modal-mask" v-if="showModal">Не уверен что это правильно...
А как правильно определить шаблон для модального окна ?
Не в сети
Мне удалось вывести модальное окно и массив с данными 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: {
viewFutureEvents() {
// alert( "viewFutureEvents::"+var_dump(-13) )
},
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
Универсальная вики-разметка
Работает на FluxBB (перевод Laravel.ru)