Anaxarchos
5 months ago
998
16
Vue

How can I assign data from a prop to a form object?

Posted 5 months ago by Anaxarchos

Can anybody please tell me how to assign data to a form object in a component? I pass the data to the component via a prop and that is working, so I can display this data (which is just a string to keep it simple) in the component. But in this component I have a form object and I cannot figure it out how to pass that string to the input field of the form. Here is the example:

<template>
    <div>
        <form @submit.prevent="submit">
            <input type="text" id="title" class="input" v-model="form.title">

            <button type="submit" class="button is-info" style="margin-top:25px;">Update</button>
            <p v-text="title"></p>
        </form>
    </div>
</template>
<script>
    export default {
        props: [
            'title'
        ],

        data() {
            return {
                form: new Form({
                    title: ''
                })
            }
        },
        
        methods: {
            submit() {
                this.$emit('update', this.form.title );
            }
        }
    }
</script>

I hope I put the question clear enough and thank you in advance.

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