為什么此v-bind：value有效？

Question

我正在使用Laravel和Vue制作籃子系統。 我的Vue文件cart.js中有一個數據對象：

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

當在產品頁面上單擊“添加到購物籃”按鈕時，將調用以下功能：

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

但是，此操作失敗並顯示500錯誤，因為據我所知，id未綁定到Vue實例。 這是視圖代碼：

<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根據渲染的代碼正確注入值：

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

但這並不限於Vue。 我已經嘗試了可以​​想到的v-model和v-bind每個排列（我知道您不應該在同一個輸入上同時使用這-這只是一長串嘗試中的最后一次），但似乎沒有任何效果。 救命！

Answer 1

您需要在數據對象上而不是模板上設置值，因為您正在使用v-model指令。 您應該看一下，它很好地說明了v模型模型指令在后台的工作方式： https : //alligator.io/vuejs/add-v-model-support/

編輯1：我只是寫了一個帶有多個材料的示例。 無論如何，我不確定是否能為您提供幫助：

模板

<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是包含ID鍵和數量鍵的Laravel PHP對象數組

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