Блог

Я пытаюсь создать панель поиска для сбора списка продуктов, после чего пользователь сможет выбрать массив продуктов и добавить его в заказ.

До сих пор продукты можно искать, добавлять в массив «продукты» с помощью кнопки «добавить», и они могут видеть данные внутри продуктов. Они также могут удалять продукты, которые им не нужны.

Моя проблема в том, что я пытаюсь отправить данные из массива «продукты» с родительской формой. Компонент поиска расположен как в форме, так и в списке. Но я не знаю, как бы я отправил массив с формой.

Мне не нужно отправлять весь объект product, а только идентификатор, который будет использоваться для связи продуктов с заказом.

Вот где находится компонент:

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

Вот данные компонента vuejs:

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

Все работает нормально, но мой вопрос.. Как я могу передать данные обратно в html / laravel, чтобы использовать их при отправке данных на контроллер. Мне нужно только отправить массив «продукты», я пытался использовать ввод с данными, но он не работает. Кто-нибудь знает, как я мог бы это сделать, или это лучший способ сделать это, используя JavaScript и добавив их в массив, найдя все отображаемые элементы?

Большое спасибо.