[Vuejs]-Vue form e.target.name.value is undefined

by

1👍

✅

In vuejs you don’t have to use the names or ids to get value of an input all you have is to use v-model which is reactive and will update all the form values instantly

check this out

<template>
    <div class="addItem" id="addItem" @submit.prevent="addItem">
        <form>
            <label for="addItem">Add food item</label>
            <input v-model="form.foodName" type="text" name="foodName"></input>
            <div>
                <select v-model="form.category" id="food">
                        <option v-for="item in list" name="item">{{item.category}}</option>
                </select>
            </div>
            <div>
                <button type="submit">Add Item</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data: () => ({
        form: {}
    }),
    methods: {
        addItem: function(){
            console.log(this.form)
        }
    }
}
</script>
👤Quantumass

Leave a comment