CODEWITHSUNDEEP
laravelvue.js
Harshith J Poojary
Harshith J Poojary

Reputation: 331

How to add multiple form values using vuejs?

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

rooms

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!

error

Upvotes: 0

Views: 637

Answers (1)

Olivier Picault
Olivier Picault

Reputation: 348

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>

Upvotes: 2

Related Questions