为什么这个 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-model 模型指令如何在后台工作：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 是一个 Laravel PHP 对象数组，包含 id 键和数量键

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