Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 1x 1x | <script setup> import { ref, watch, onMounted, inject } from 'vue'; const props = defineProps({ goal: { type: Object, default: null, }, }); // Load Store and Router const store = inject('store'); const emit = defineEmits([ 'change-GoalName', 'change-GoalDescription', ]); // Define constants that will be referenced const goalname = ref('') const goaldescription = ref('') onMounted(() => { goalname.value = props.goal.name goaldescription.value = props.goal.description }) // Watch changes on goalname watch(goalname, (newGoalName) => { store.state.learningpath.name = newGoalName; emit('change-GoalName', newGoalName); }); // Watch changes on goaldescription watch(goaldescription, (newGoalDescription) => { store.state.learningpath.description = newGoalDescription; emit('change-GoalDescription', newGoalDescription); }); // Watch changes on goaldescription watch(() => store.state.learningpath, async () => { goalname.value = store.state.learningpath.name goaldescription.value = store.state.learningpath.description }, { deep: true } ); </script> <template> <div> <div v-if="store.state.view!='teacher'"> <h4 class="font-weight-bold"> {{ store.state.strings.fromlearningtitel }} </h4> <div> <input id="goalnameplaceholder" v-model="goalname" v-autowidth="{ maxWidth: '960px', minWidth: '20px', comfortZone: 0 }" class="form-control fancy-input" :placeholder="store.state.strings.goalnameplaceholder" type="text" autofocus > </div> <h4 class="font-weight-bold"> {{ store.state.strings.fromlearningdescription }} </h4> <div> <textarea id="goalsubjectplaceholder" v-model="goaldescription" v-autowidth="{ maxWidth: '960px', minWidth: '40%', comfortZone: 0 }" class="form-control fancy-input" :placeholder="store.state.strings.goalsubjectplaceholder" /> </div> </div> <div v-else> <div class="card border-primary mb-3"> <div class="card-header bg-primary text-white"> <h5 class="card-title mb-0"> {{ store.state.strings.fromlearningtitel }} </h5> </div> <div class="card-body"> <p class="card-text"> {{ goalname ? goalname : 'No name provided.' }} </p> </div> </div> <div class="card border-secondary"> <div class="card-header bg-secondary text-white"> <h5 class="card-title mb-0"> {{ store.state.strings.fromlearningdescription }} </h5> </div> <div class="card-body"> <p class="card-text"> {{ goaldescription ? goaldescription : 'No description provided.' }} </p> </div> </div> </div> </div> </template> |