How to remember value from Vue-component after after an error message from Blade?

Hello everybody

I have some Vue-components which integrated in Blade:

<div class="col-md-12 mb-3">

	<appointment-details-editor>
	</appointment-details-editor>

	@error('details')
	<div class="alert alert-danger mt-2 mb-0">{{ $message }}</div>
	@enderror

</div>

Inside Vue-component "appointment-details-editor":

<template>
    <div class="mb-3">

        <Editor v-model="details"
                placeholder="Typ hier uw beschrijving..."
                editorStyle="height: 320px;font-size: 1.05rem;"/>

        <input type="hidden" name="details" :value="details ? details : ''">

    </div>
</template>

<script>
import 'primevue/resources/themes/aura-light-green/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

import Editor from 'primevue/editor';

export default {

    components: {
        Editor,
    },

    props: {},

    data() {

        return {
            details: '',
        };
    },
};

</script>

If I try to save (send) this form (an Appointment) And any field has an error (for example, "Page title is mandatory field") then field "Details" are empty.

How to remember value in the field "Details" if any field has any error?

Tnx

gych

2 years ago

Best Answer

Level 29

I think you could try to pass old('details') to your Vue component as prop

<appointment-details-editor :oldDetails="{{ old('details') }}">

Then in your vue component try something like this

export default {

    components: {
        Editor,
    },

    props: {
        oldDetails: {
            type: String,
            default: '',
        },
    },

    data() {
        return {
            details: this.oldDetails,
        };
    },
};

1 like

ictoplossing

2 years ago

Level 1

@gych Hi, Yes, it works! But I use Editor-component which return HTML-code.

If I try to use some html-tag - I get an error:

app.js:64 [Vue warn]: Template compilation error: Error parsing JavaScript expression: Unexpected token '<'
184|                                  <div class="col-md-12 mb-3">
185|  
186|                                      <appointment-details-editor-create :olddetails="<p>Product Accounts <strong>Officer</strong></p>">
   |                                                                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
187|                                      </appointment-details-editor-create>

How to solve this problem?

Grts

gych

2 years ago

Level 29

@ictoplossing You want to display the html as rendered html / text in the component?

ictoplossing

2 years ago

Level 1

@gych Hi The problem has been solved by this way:

<appointment-details-editor-create :old-details="{{ json_encode(old('details')) }}">
</appointment-details-editor-create>

Thank you!

1 like

Please or to participate in this conversation.