i have a question:
I have two files. I want to dynamically acess the value of assignmentData of the one file when it s value changes. How do i do this. Its changed when i mark a checkbox…
Component code: `
<form class="form-horizontal">
<div class="form-group" >
<label for="kursAusgewählt" class="col-sm-4 control-label" ></label>
<template v-if="data_for_assignment.kurs.priority_system == 0">
<div class="col-smfz-11" style="margin-top: -40px;" >
<label id="kursAusgewählt" class="checkbox-container" >
<input type="checkbox" :checked="assignmentData.selected" @change="update('selected', $event.target.checked)">
<span class="checkmark" style="margin-left: -40px; margin-top:33px;"> Auswählen</span>
</label>
</div>
</template>
<template v-if="data_for_assignment.kurs.priority_system == 1" >
<div class="col-smfz-6" >
<select v-model="assignmentData.selected_prio" class="form-control inline" data-width="85px" style="color:gray; ;width: 100px; margin-left:-40px;margin-top: -8px;">
<option v-for="prio in data_for_assignment.prios" :key="prio" :value="prio">
<template v-if="prio == 0">
Priorität wählen
</template>
<template v-else>
Priorität {{prio}}
</template>
</option>
</select>
</div>
</template>
</div>
</form>
import modal from “../../modal.vue”
export default {
name: ‘anmeldenScheduleComponent’,
components: {
modal
},
props: {
assignmentData: [],
data_for_assignment: {},
},
data: function() {
return {
value_default: {
selected: false,
selected_prio: 0,
},
showModal: false,
}
},
updated (){
this.setDefault();
},
mounted(){
this.setDefault();
},
methods: {
update(key, value) {
this.assignmentData[key] = value;
this.$emit(‘update:assignmentData’, this.assignmentData);
},
setDefault() {
if (this.assignmentData == [] || !this.assignmentData.assignedDefault){
for (const [key, value] of Object.entries(this.value_default)) {
this.assignmentData[key] ??= value;
}
this.$emit(‘update:assignmentData’, this.assignmentData);
this.assignmentData.assignedDefault = true;
}
},
},
computed: {
}
}
and here the code of the main file:
<div class="home">
<div class="body content rows scroll-y">
<div class="page-heading animated fadeInDownBig">
<h1>Kursanmeldung</h1>
</div>
<box_content>
<h2><strong>Anmeldbare Kurses</strong>
<div class="" style="margin-top: 4px; margin-left: 150px; position: absolute; top: 16px; color: #909090">
<a class="additional-icon" id="dropdownErklaerung" data-toggle="dropdown" aria-expanded="false" style="color: #909090"><i class="fa fa-question-circle"></i></a>
<div class="fragezeichenErklaerung dropdown-menu pull-right" style="margin-right: -150px" aria-labelledby="dropdownErklaerung">
In diesem Menü können Sie die Kurse einsehen, für welche Sie sich anmelden können.
</div>
</div>
<template v-if="kurseAnmeldbar && kurseAnmeldbar.length > 0">
<div class="pull-right selectobenrechts" style="margin-top: -10px; max-width: 368px;">
<select v-model="selected_kurs_id" class="form-control inline" data-width="150px" style="z-index:0 !important; display: inline-block;;" @change="updateSelection">
<option v-for="kurs in kurseAnmeldbar" :key="kurs.id" :value="kurs.id">
{{kurs.name}}
</option>
</select>
</div>
</template>
</h2>
<template v-if="kurseAnmeldbar && kurseAnmeldbar.length > 0">
<div align="right" class="form-group">
<div class="btn-toolbar">
<template v-if="!anmeldenAllowed">
<b>{{ anmeldenDisabledReason }}</b>
</template>
<button type="button" class="btn btn-primary" v-on:click="kursAnmelden" :disabled="!anmeldenAllowed">Anmeldung absenden</button>
</div>
</div>
<div class="form-group">
<label for="textInput">Zusätzliche Bemerkung zur Anmeldung</label>
<input type="text" class="form-control" id="textInput" placeholder="Hier zusätzliche Bemerkungen eingeben...">
</div>
<div class="form-group" style="padding: 20px;">
<scheduler :assignments="termine" :allow_add_assignment="false" :allow_delete_assignment="false" :allow_drag_and_drop="false" :allow_resize="false" :slot_component_name="'anmeldenScheduleComponent'" v-bind:data_for_assignment="dataForAssignment" />
</div>
</template>
<template v-else>
<center>
<h2>Es sind keine anmeldbaren Kurse vorhanden.</h2>
</center>
</template>
</box_content>
</div>
</div>
import {apiRequest} from "../../services/api.js"
import box_content from "../../components/box_content.vue"
import scheduler from "../../components/scheduler/scheduler.vue"
import anmeldenScheduleComponent from "../../components/scheduler/slotComponents/anmeldenScheduleComponent.vue"
import {timestringToDate} from "../../services/service_scheduler.js"
export default {
components: {
scheduler, box_content, anmeldenScheduleComponent,
},
data: function() {
return {
kurseAnmeldbar: [],
selected_kurs_id: -1,
selected_kurs: {},
assignmentData:{},
}
},
methods: {
async update () {
try{
this.kurseAnmeldbar = await apiRequest("get", "/kursverwaltung/kurse/anmeldbar");
}catch{
console.log("ERROR")
}
if (this.kurseAnmeldbar != null && this.kurseAnmeldbar.length > 0 && this.selected_kurs_id == -1){
this.selected_kurs_id = this.kurseAnmeldbar[0].id;
this.updateSelection();
}
},
updateSelection(){
for (const kurs of this.kurseAnmeldbar){
if (kurs.id == this.selected_kurs_id){
this.selected_kurs = kurs;
}
}
},
async kursAnmelden() {
let bemerkung= document.getElementById("textInput").value
let belegungen = [];
for (const termin of this.selected_kurs.termine){
for (const real_termin of termin.reale_termine){
if (this.selected_kurs.priority_system == 0){ //&& real_termin.selected==true){
belegungen.push({
"termin": 2, //real_termin, //real_termin,//2,// termin.selected,//real_termin,
"mitglied":0,
"prio": null,
"bemerkung": bemerkung,
//"selected": true,
})
}
else{
belegungen.push({
// "termin": real_termin,
"termin": 1,//termin.selected,//real_termin,
"mitglied":0,
"prio": real_termin.selected_prio,
"bemerkung": bemerkung,
//"prio": termin.selected_prio,
})
}
}
}
try{
await apiRequest("post", "kursverwaltung/anmelden",
{
"kurs": this.selected_kurs.id,
"belegungen": belegungen,
}
);
this.requestResponse = "Belegung erfolgreich gespeichert"
}catch(ex){
this.requestResponse=”Fehler” }
this.update();
}
},
async mounted (){
let dependency = document.createElement('script')
dependency.setAttribute('src', '../../../../' + "js/script.js")
document.head.appendChild(dependency)
this.update();
},
computed: {
termine(){
let termine = []
let counter = 0;
for (let termin of this.selected_kurs.termine){
termin.starttime = new Date(termin.starttime);
termin.endtime = new Date(termin.endtime);
termin.column_id = termin.wochentag;
termin.title = "Termin " + (counter+1);
//termin.selected = false;
if (termin.selected_prio){
termin.selected_prio = String(termin.selected_prio)
}
termin.reale_termine = [] //Das brauchen wir für den Overlap. Also welche realen Termine der Termin abdeckt
let overlap = false;
let overlap_termin = null;
for (let termin2 of termine){
if (termin.starttime.getTime() == termin2.starttime.getTime() && termin.endtime.getTime() == termin2.endtime.getTime() && termin.column_id == termin2.column_id){
overlap = true;
overlap_termin = termin2;
}
}
if (!overlap){
termin.reale_termine.push(termin.id);
termine.push(termin);
counter++;
}
else{
termin.hide = true;
overlap_termin.reale_termine.push(termin.id);
}
}
return termine;
},
dataForAssignment(){
let prios = Array.from(Array(this.selected_kurs.maximum_selections+1).keys())
return {
kurs: this.selected_kurs,
prios: prios,
}
},
anmeldenAllowed() {
return this.anmeldenDisabledReason === ""; //Kann sein, dass hier der Render Bug entsteht
},
anmeldenDisabledReason () {
const kurs = this.selected_kurs;
let selectedTermineCount = 0;
if (kurs.priority_system === 0) {
selectedTermineCount = kurs.termine.filter(termine => termine.selected).length;
}
else if (kurs.priority_system === 1) {
const selectedPriorities = [];
for (const termin of kurs.termine) {
if (termin.selected_prio !== undefined && termin.selected_prio !== null && termin.selected_prio !== "" && termin.selected_prio !== "0" && termin.selected_prio !== 0) {
if (selectedPriorities.includes(termin.selected_prio)) {
return " Die Prioritätsstufe " + termin.selected_prio + " ist doppelt belegt"
}
selectedPriorities.push(termin.selected_prio);
}
}
selectedTermineCount = selectedPriorities.length
}
if (selectedTermineCount < kurs.minimial_selections){
return "Bitte wählen Sie mindestens " + kurs.minimial_selections + " Termin(e)"
}
else if (selectedTermineCount > kurs.maximum_selections){
return "Bitte wählen Sie maximal " + kurs.maximum_selections + " Termin(e)"
}
else{
return ""
}
}
}
}
`
I tried multiple times by v-mode, v-bind and so on but always got an error or that the value i try to access is “undefined”…
Thanks for your help!
New contributor
user24803569 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.