How to add multiple form values using vuejs?

Question

select_room.blade.php

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

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

When I click on room buttons (eg: 105,106) room numbers will be added to selected array. But when I check my $request->rooms its showing null. I just wanted to how to add multiple values to name=rooms[] using vue.js Thanks in advance!

What about <input type="hidden" name="rooms[]" v-model="selected"> ? — Clément Baconnier
– Clément Baconnier, Commented Apr 9, 2020 at 16:46
When I select one room it's working, for multiple selections its showing null — Harshith J Poojary
– Harshith J Poojary, Commented Apr 9, 2020 at 16:52

Olivier Picault · Accepted Answer · 2020-04-09 17:16:00Z

I didn't setup a PHP/Blade/Vue.js environment but the following seems to be achieving what you're looking for. I got a rooms GET variable with coma separated selected values.

<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>

Collectives™ on Stack Overflow

How to add multiple form values using vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related