php - 如何使用 Vuejs 组件从 Laravel 表单传递数据,选择标签不起作用

标签 php html laravel select vuejs2

我有一个用于在购物车中发布产品的表单,我有一个 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/

相关文章:

php - SQL排序查询

javascript - 图像不会在隐藏和显示之间切换

类似于 Laravel 的 Lumen PHPStorm 插件

javascript - 警报消息框后面显示空白页

php - 保护 php 包括(使用 htaccess?)

javascript - CSS 缩放(带绝对位置)

PHP 代码没有从 POST 提交数据

php - 弥补维护/停机期间错过的 Laravel 任务的正确方法是什么?

php - Laravel 5.3 资源 : change action

来自mysql的Php多维数组