我有一个用于在购物车中发布产品的表单,我有一个 Vuejs 组件设置,它可以很好地检索数据,但是当我尝试添加选择标签时,我无法从中传递数据。 这是我的blade.php 文件代码:
<form action="{{ url('/cart') }}" method="POST" class="side-by-side">
<input type="hidden" name="id" v-model="this.id" value="{{ $product->id }}">
<input type="hidden" name="name" v-model="this.name" value="{{ $product->name }}">
<input type="hidden" name="price" v-model="this.price" value="{{ $product->price }}">
{{-- 无法弄清楚如何传递以下内容 --}}
<select v-model="selected" required>
<option disabled value="">Please select one</option>
@foreach($product->withOptions() as $option)
<option value="{{ $option->options }}">{{ $option->options }}</option>
@endforeach
</select>
<addToCart :product="{{ $product }}"></addToCart>
这是我的 vue 文件:
export default {
props: ['product'],
data() {
return {
id: this.product.id,
quantity: 1,
name: this.product.name,
price: this.product.price,
selected: '' // always null, can't figure it out
}
},
methods: {
addtocart() {
axios.post('/cart/', this.$data)
.then(flash(this.product.name + ' was added to cart'));
}
}
}
感谢您的帮助。
最佳答案
这样解决:
<addToCart :product="{{ $product }}" :selected="selected"></addToCart>
在 vue 文件中:
export default {
props: ['product', 'selected'],
data() {
return {
id: this.product.id,
quantity: 1,
name: this.product.name,
price: this.product.price,
options: this.selected
}
},
watch: {
selected: function() {
return this.options = this.selected
}
},
methods: {
addtocart() {
axios.post('/cart/', this.$data)
.then(flash(this.product.name + ' was added to cart'));
},
刚刚添加了一个观察者的东西。
关于php - 如何使用 Vuejs 组件从 Laravel 表单传递数据,选择标签不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46014524/