为什么此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))
        }
    }
}