Как добавить несколько значений формы, используя vuejs?

Question

select_room.blade. php

<input type="hidden" name="rooms[]" :value="selected">

приложение. js

const app = new Vue({
    el: '#panel',
    data: {
        selected: []
    },
    methods: {
        selectRoom(room) {
            if (!this.selected.find(room => room)) {
                this.selected.push(room);
            } else {
                this.selected.pop(room);
            }

            console.log(this.selected);
        }
    }
});

При нажатии на кнопки комнат (например, 105,106) номера комнат будут добавлены в массив selected. Но когда я проверяю свои $ request-> комнаты, он показывает null. Я просто хотел, как добавить несколько значений к name=rooms[], используя vue. js Заранее спасибо!

Answer 1

Я не настроил среду PHP / Blade / Vue. js, но, похоже, следующее позволяет достичь того, что вы ищете. Я получил rooms переменную GET с выбранными значениями, разделенными запятой.

<div id="app">
    <form method="GET">
        <button @click.prevent="selectRoom(1)">1</button>
        <button @click.prevent="selectRoom(2)">2</button>
        <button @click.prevent="selectRoom(3)">3</button>
        <input type="hidden" name="rooms" :value="selected" />
        <input type="submit" text="submit">
    </form>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: [],
        },
        methods: {
            selectRoom(room) {
                if (!this.selected.includes(room)) {
                    this.selected.push(room);
                } else {
                   this.selected.pop(room);
                }
                console.log(Object.values(this.selected));
            }
        },
    }
)
</script>