javascript - Vuejs return data from component to Laravel

Question

I am trying to make a search bar to collect a list of products which the user will then be able to select an array of products and add it to an order.

So far the products can be searched, added to a "products" array via an "add" button and they are able to see the data within products. They are also able to remove products that they do not want.

My issue is that I am trying to send the data from the "products" array with a parent form. The search component is located within the form as well as the list. But I do not know how I would send the array with the form.

I do not need to send the entire product object, but just the ID which will be used to link up the products with the order.

Here is where the component is:

<div class="uk-margin" id="search">
    <label for="Search" class="uk-form-label">Search products to add</label>
    <search input="ess"></search>
</div>

Here is the vuejs component data:

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

Everything works fine, but my question is.. How am I able to pass the data back to the html / laravel to use it while sending data to the controller. I only need to send the "products" array, I have tried using input with the data but it isn't working. Does anyone know how I could do it, or is the best way to do so, using JavaScript and add them to an array by finding all the elements which are being displayed?

Many thanks.

Answer 1

等待大神答复