zxtanzxzx
85
3
Vue

Vue, Dynamic Input Field, Retain/Keep after refresh

Posted 3 months ago by zxtanzxzx

I am doing a form dynamic input field, using Vue,js. The dynamic field part is good, but I have a problem. When I submit the form with added dynamic field and click submit. Whenever, validation failed, it return the page without the added dynamic field.

What can i do to retain/keep the field after the page refresh

Controller Code

public function returnRequest(Request $request){

        $validatedData = $request->validate([

            'names.*' => 'required',
            'ids.*' => 'required',
            'emails.*' => 'required',
        ]);

        $a = count($request->ids);
        return dd($request);
    }

Blade Code

@extends('layouts.app')

@section('content')

<div class="container">
    <form action="/form" method="post">

        @csrf
        
        <formtest ></formtest>
        <button type="submit">Submit</button>
    </form>
</div>
@endsection

Vue.js Code

<template>
    <keep-alive>
        <div class="app">
            <div class="container" id="app">
                <button type="button" @click="addSupervisor">Add Supervisor</button>
                <div class="form-container" v-for="(supervisor,index) in supervisors">
                    <div class="superviser-field">
                        <div>Supervisor (index: {{index + 1}}) </div><button type="button" @click="deleteSupervisor">X</button>
                        <div>
                            <label for="name">Name</label>
                            <input class="form-control" type="text" name="names[]" id="name" v-model="supervisor.name">
                        </div>  
                        <div>
                            <label for="id">ID</label>
                            <input class="form-control" type="text" name="ids[]" id="name" v-model="supervisor.id">
                        </div>
                        <div>
                            <label for="email">Email</label>
                            <input class="form-control" type="text" name="emails[]" id="email" v-model="supervisor.email">
                        </div>
                    </div>
                    <br>
                </div>
            </div>  
        </div>
    </keep-alive>
</template>


<script>
    export default {
        data:function() {
            return {
                supervisors:[
                    {
                        name:'',
                        id:'',
                        email:'',
                    }
                ]
            };
        },
        methods:{
            addSupervisor(){
                this.supervisors.push({
                    name:'',
                    id:'',
                    email:'',
                })
            },
            deleteSupervisor(index){
                this.supervisors.splice(index, 1)
            }
        }
    };
</script>

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.