Showing
3 changed files
with
12 additions
and
20 deletions
| @@ -22,12 +22,11 @@ watch( | @@ -22,12 +22,11 @@ watch( | ||
| 22 | if (comments.length) { | 22 | if (comments.length) { | 
| 23 | comments.forEach((comment, index) => { | 23 | comments.forEach((comment, index) => { | 
| 24 | const element = document.getElementById(`message${index}`) as HTMLParagraphElement; | 24 | const element = document.getElementById(`message${index}`) as HTMLParagraphElement; | 
| 25 | - console.log(element); | ||
| 26 | element.innerHTML = comment.message; | 25 | element.innerHTML = comment.message; | 
| 27 | }); | 26 | }); | 
| 28 | } | 27 | } | 
| 29 | }); | 28 | }); | 
| 30 | - }, | 29 | + }, { immediate: true } | 
| 31 | ); | 30 | ); | 
| 32 | //#endregion | 31 | //#endregion | 
| 33 | </script> | 32 | </script> | 
| @@ -56,6 +56,10 @@ const formData = reactive({ | @@ -56,6 +56,10 @@ const formData = reactive({ | ||
| 56 | const v$ = useVuelidate(rules, formData); | 56 | const v$ = useVuelidate(rules, formData); | 
| 57 | //#endregion | 57 | //#endregion | 
| 58 | 58 | ||
| 59 | +const errormessages = computed(() => { | ||
| 60 | + return v$.value.message.$errors.map((e) => e.$message); | ||
| 61 | +}); | ||
| 62 | + | ||
| 59 | //#region --Function--. | 63 | //#region --Function--. | 
| 60 | async function submitComment() { | 64 | async function submitComment() { | 
| 61 | emit("event:submit", formData); | 65 | emit("event:submit", formData); | 
| @@ -70,27 +74,12 @@ function clear() { | @@ -70,27 +74,12 @@ function clear() { | ||
| 70 | 74 | ||
| 71 | function handleMessageEvent(event: string) { | 75 | function handleMessageEvent(event: string) { | 
| 72 | formData.message = event; | 76 | formData.message = event; | 
| 77 | + // todo : revoir ici la validation manquante (dû au retour de TinyMCE). | ||
| 73 | v$.value.message.$touch(); | 78 | v$.value.message.$touch(); | 
| 79 | + // console.log(formData.message.replace(/<[^>]*>/g, '')); | ||
| 80 | + // console.log(formData.message.replace(/(<([^>]+)>)/ig, '')); | ||
| 74 | } | 81 | } | 
| 75 | 82 | ||
| 76 | -/* | ||
| 77 | - | ||
| 78 | - if (event.length < 3) { | ||
| 79 | - v$.value.message.$errors[0] = { | ||
| 80 | - $propertyPath: "username", | ||
| 81 | - $property: "username", | ||
| 82 | - $validator: "required", | ||
| 83 | - $uid: "username-required", | ||
| 84 | - $message: rules.message.minLength as unknown as string, | ||
| 85 | - $params: { | ||
| 86 | - type:"required" | ||
| 87 | - }, | ||
| 88 | - $response: false, | ||
| 89 | - $pending: false, | ||
| 90 | - }; | ||
| 91 | - } | ||
| 92 | - */ | ||
| 93 | - | ||
| 94 | //#endregion | 83 | //#endregion | 
| 95 | </script> | 84 | </script> | 
| 96 | 85 | ||
| @@ -116,6 +105,7 @@ function handleMessageEvent(event: string) { | @@ -116,6 +105,7 @@ function handleMessageEvent(event: string) { | ||
| 116 | @blur="v$.rating.$touch" | 105 | @blur="v$.rating.$touch" | 
| 117 | @input="v$.rating.$touch" | 106 | @input="v$.rating.$touch" | 
| 118 | /> | 107 | /> | 
| 108 | +<!-- <pre>{{ errormessages }}</pre>--> | ||
| 119 | <ui-components-tiny-mce-field-editor | 109 | <ui-components-tiny-mce-field-editor | 
| 120 | :error-message="v$?.message?.$errors[0]?.$message ? (v$.message.$errors[0].$message as string) : ''" | 110 | :error-message="v$?.message?.$errors[0]?.$message ? (v$.message.$errors[0].$message as string) : ''" | 
| 121 | :model-value="formData.message" | 111 | :model-value="formData.message" | 
| @@ -55,6 +55,9 @@ const init = { | @@ -55,6 +55,9 @@ const init = { | ||
| 55 | content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }", | 55 | content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }", | 
| 56 | skin: "oxide-dark", | 56 | skin: "oxide-dark", | 
| 57 | content_css: "dark", | 57 | content_css: "dark", | 
| 58 | + // forced_root_block: false, | ||
| 59 | + // valid_elements: [], | ||
| 60 | + // entity_encoding : "raw", | ||
| 58 | }; | 61 | }; | 
| 59 | //#endregion | 62 | //#endregion | 
| 60 | 63 | 
- 
Please register or login to post a comment