I'm currently working on a basket system that utilizes both Laravel and Vue. In my Vue file, cart.js, I have a data object structured like this:
data: {
material: {
id: '',
qty: '1',
},
}
When the user clicks on the 'Add to Basket' button on the product page, it triggers the following function:
addToBasket: function(){
var that = this;
var item = this.material;
this.$http.post('/api/buy/addToBasket', item).then(response => {
this.basketAddSuccess = true;
}, response => {
//error
});
}
Unfortunately, this function fails with a 500 error because it appears that the id is not being properly bound to the Vue instance. Here's an extract of 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>
Despite Laravel correctly injecting the value as seen in the rendered code:
<input type="hidden" v-model="material.id" value="1">
The binding to Vue doesn't seem to be functioning. I've experimented with different combinations of v-model and v-bind without success. Any guidance would be greatly appreciated!