Javascript Vuejs将数据从组件返回到Laravel

Javascript Vuejs将数据从组件返回到Laravel,javascript,php,html,laravel,vue.js,Javascript,Php,Html,Laravel,Vue.js,我正在尝试制作一个搜索栏来收集产品列表,然后用户可以选择一系列产品并将其添加到订单中 到目前为止,可以搜索产品,通过“添加”按钮将其添加到“产品”数组中,并且他们可以看到产品中的数据。他们还可以删除他们不想要的产品 我的问题是,我试图用父窗体从“产品”数组发送数据。搜索组件位于表单和列表中。但我不知道如何将数组与表单一起发送 我不需要发送整个product对象,只需要发送用于将产品与订单链接起来的ID 以下是组件的位置: <div class="uk-margin" i

我正在尝试制作一个搜索栏来收集产品列表,然后用户可以选择一系列产品并将其添加到订单中

到目前为止,可以搜索产品,通过“添加”按钮将其添加到“产品”数组中,并且他们可以看到产品中的数据。他们还可以删除他们不想要的产品

我的问题是,我试图用父窗体从“产品”数组发送数据。搜索组件位于表单和列表中。但我不知道如何将数组与表单一起发送

我不需要发送整个product对象,只需要发送用于将产品与订单链接起来的ID

以下是组件的位置:

<div class="uk-margin" id="search">
    <label for="Search" class="uk-form-label">Search products to add</label>
    <search input="ess"></search>
</div>
一切正常,但我的问题是。。如何将数据传回html/laravel,以便在向控制器发送数据时使用它。我只需要发送“products”数组,我已经尝试使用数据输入,但它不起作用。有人知道我是如何做到这一点的吗?或者,最好的方法是使用JavaScript并通过查找所有显示的元素将它们添加到数组中

非常感谢

export default {
    data() {
        return {
            keywords: null,
            results: [],
            products: []
        };
    },
    watch: {
        keywords (after, before) {
            this.fetch();
        }
    },
    methods: {
        fetch() {
            axios.get('/search', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        },
        addProduct (product) {
            let duplicate = false;
            this.products.forEach((item, index) => {
                if (item.ID === product.ID) {
                    duplicate = true;
                }
            });
            if (!duplicate) {
                this.products.push(product);
            }

        },
        removeProduct (product) {
            Vue.delete(this.products, product);
        }
    }
}