Why is this v-bind:value working?

Question

I'm making a basket system using Laravel and Vue. I have a data object in my Vue file, cart.js:

data: {
  material: {
    id: '',
    qty: '1',
  },
}

And when the 'Add to Basket' button is clicked on the product page, the following function is called:

addToBasket: function(){
  var that = this;
  var item = this.material;
  this.$http.post('/api/buy/addToBasket', item).then(response => {
    this.basketAddSuccess = true;
  }, response => {
      //error
  });
}

However, this fails with a 500 error, because as far as I can see the id is not being bound to the Vue instance. Here's the view code:

<form v-on:submit.prevent="addToBasket(material)">
  <input type="hidden" v-model="material.id" v-bind:value="{{ $material->id }}">
  <div class="form-group">
        <label for="qty">Quantity</label>
        <input class="form-control" name="qty" type="number" v-model="material.qty" v-bind:value="1">
  </div>
  <button class="btn btn-block btn-primary">@{{ buttonText }}</button>
</form>

Laravel is injecting the value correctly as per the rendered code:

<input type="hidden" v-model="material.id" value="1">

But this isn't being bound to Vue. I have tried every permutation of v-model and v-bind (I know that you shouldn't use both on the same input - this is just the last in a long line of attempts) that I can think of but nothing seems to work. Help!

Answer 1

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))
        }
    }
}