TimeSocks
621
18
Vue

Why won't this value bind?

Posted 1 year ago by TimeSocks

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(material){
        this.$http.post('/api/buy/addToBasket', material).then(response => {
                this.basketAddSuccess = true;
                }, response => {
                    //error
                });
                
                setTimeout(function(){ this.basketAddSuccess = false; }, 4000);
}

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!

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

Reply to

Use Markdown with GitHub-flavored code blocks.