maximaexchen
412
11
Vue

Form in blade with vue functionality

Posted 1 year ago by maximaexchen

Hi. I have a vue instance on #app. which is used by a site wide tooltip component.

Now I try to get a subscription multistep form in a blade file up and running.

I still beginn to understand how all this is working together.

in my app.js I have

const app = new Vue({
    el: '#app',
    data: function () {
        return {
            step:1,
            subscription:{
                subscription_plan:'',
                customer_name:'',
                customer_email:'',
                customer_iban:'',
                customer_tan:''
            }
        }
    },
    methods:{
        prev() {
            this.step--;
        },
        next() {
            this.step++;
        },
        submit() {
            
        }
    }
});

in the subscription.blad.php

<div v-if="step === 2">
                                <div class="form-group">
                                    <label for="customer_name">{{ __('Name') }}</label>
                                    <input v-model="subscription.customer_name" type="text" class="form-control" id="customer_name" name="customer_name" value="{{ $user->name ?? '' }}">

                                </div>


                                <div class="form-group">
                                    <label for="customer_email">{{ __('Email') }}</label>
                                    <input v-model="subscription.customer_email" type="text" class="form-control" id="customer_email" name="customer_email" value="{{ $user->email ?? '' }}">
                                </div>

                                <div class="form-group">
                                    <label for="customer_iban">{{ __('IBAN') }}</label>
                                    <input v-model="subscription.customer_iban" type="text" class="form-control" id="customer_iban" name="customer_iban" value="">
                                </div>

                                <div class="form-group">
                                    <label for="customer_phone">{{ __('Mobilenumber') }}</label>
                                    <input v-model="subscription.customer_phone" type="text" class="form-control" id="customer_phone" name="customer_phone" value="{{ $user->telephone ?? '' }}">
                                </div>
                                <button @click.prevent="prev()">Previous</button>
                                <button @click.prevent="next()">Next</button>
                            </div>

The initial values of the input fields get emptied when the VUE instance is called.

Could some one give me a hin?

Thanks and regards Marcus

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