[Vuejs]-Why is this v-bind:value working?

by

0👍

You need to set the value on the data object, not on the template because you’re using v-model directive. You should take a look to this, it explains well how v-model model directive works in background : https://alligator.io/vuejs/add-v-model-support/

EDIT 1 : I juste wrote an exemple with multiples materials. I’m not sure if it will help you, anyway :

The template

<template>
    <div class="materials">
        <form 
            class="material"
            v-for="material in materials"
            :key="material.id"   
            @submit.prevent="addToBasket(material)"
        >
            <div class="form-group">
                <label for="quantity">Quantity</label>
                <input type="number" name="quantity" :value="material.qty">
            </div>
            <button class="btn btn-block btn-primary">@{{ buttonText }}</button>
        </form>
    </div>
</template>

Javascript, $materials is a Laravel PHP Array of Objects containing id key and quantity key

export default {
    data() {
        return {
            basketAddSuccess : false,
            materials : {!! json_encode($materials) !!}
        };
    },
    methods : {
        addToBasket(material) {
            this.$http.post('/api/buy/addToBasket', material).then(response => this.basketAddSuccess = true).catch(error => console.log(error))
        }
    }
}
👤Ekushisu

Leave a comment