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：我juste用多种材料写了一个例子。无论如何，我不确定它是否会对你有所帮助：

模板

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

为什么这个v-bind：值有效？

1 个答案: