/
component.vue
51 lines (46 loc) · 1.35 KB
/
component.vue
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
<template>
<form @submit="onSubmit">
<h5>Edit a existing measuring serie</h5>
<editor-serie v-if="editorFormRef !== null" :editor-form="editorFormRef"></editor-serie>
<button class="btn btn-primary" type="submit" id="submit">Edit</button>
<button class="btn btn-secondary" type="reset" id="cancel" @click="onCancel">Abbrechen</button>
<button class="btn btn-danger" type="button" id="delete" @click="onDelete">Delete</button>
</form>
</template>
<script>
import { EditSerieController } from './controller';
import EditorSerieComponent from '../editor/component.vue';
import { ref, watchEffect } from '@vue/composition-api';
export default {
props: ['resolvedRoute'],
components: {
'editor-serie': EditorSerieComponent,
},
setup(props) {
const $ctrl = new EditSerieController(props.resolvedRoute.params.id);
const editorFormRef = ref(null);
watchEffect(() => {
editorFormRef.value = $ctrl.editorForm;
});
const onCancel = (event) => {
$ctrl.onCancel();
};
const onDelete = () => {
$ctrl.onDelete();
};
const onSubmit = (event) => {
event.preventDefault();
event.stopPropagation();
$ctrl.editorForm = editorFormRef.value;
$ctrl.onSubmit();
};
return {
$ctrl,
editorFormRef,
onCancel,
onDelete,
onSubmit,
};
},
};
</script>