Vue.js acess components values

Question

I have a question: I have two files. I want to dynamically access the value of assignmentData of the one file when it's value changes. How do I do this? It's changed when I mark a checkbox... Component code:

<template>
 <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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 &nbsp; wählen &nbsp;
 </template>
 <template v-else>
 Priorität {{prio}}
 </template>
 </option>
 </select> 
 </div>
 </template>
 
 </div>
 </form>

<script>
 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: {
 
 }
 }
</script>

and here the code of the main file:

<template>
 <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>
 </template>
 <script>
 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 ""
 } 
 }
 }
}
</script>
<style>
</style>

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!

• kissu: What's the state you have in the first component and want to use in the other? One simple way would be to use a store like Pinia, but it might be overkill in this situation.
• Estus Flask: Please, provide stackoverflow.com/help/mcve for the problem. There's too much irrelevant code
• user24803569: @kissu what do you mean by state? I have a ceckbox for a bunch of assignments. If the checkbox is marked, the value of this.assignmentData.selected changes to true or false. i need to be able to get this boolean value of this.assignmemntData.selected in the other vue file
• kissu: If you use Vue, you are supposed to use state. This is how you do set a state for a checkbox. Otherwise, it would be by accessing the elements in the DOM as in vanilla JS. But then you do not have any reactivity. TLDR: use vanilla JS or VueJS with a state for your UI components/toggles/inputs etc.