Laravel and vue pass array to prop

Question

I've got a multiselect component that looks like this:

 <multi-select prp-selected="<?php old('organisations_working_at') ?>"
              prp-name="organisations_working_at"
              :prp-options="{{ json_encode($organisations) }}"
              prp-placeholder="Kies organisatie(s)">
</multi-select>

As you can see I pass the old('organisations_working_at') value from laravel.

My component looks like this (I made a wrapper around another multi-select):

<template>
    <div>
        <input type="hidden" v-for="select in selected" :name="prpName + '[]'" :value="select.id">

        <multiselect
                v-model="selected"
                :multiple="true"
                :options="prpOptions"
                :custom-label="prpCustomLabel"
                :placeholder="prpPlaceholder"
                track-by="id"
                selectLabel="Druk op enter en voeg toe"
                deselectLabel="Druk op enter en verwijder"
                open-direction="top"
                @select="select"
                @remove="remove">
        </multiselect>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect';

    export default {
        components: { Multiselect },

        props: {
            prpSelected: {
                type: Array,
                default: this.selected,
            },

            prpOptions: {
                type: Array,
                default: this.options,
            },

            prpCustomLabel: {
                type: Function,
                default: (label) => label.name,
            },

            prpPlaceholder: {
                type: String,
                default: "Kies items"
            },

            prpName: {
                type: String,
                default: "items"
            }
        },

        created() {
            this.selected = this.prpSelected;
        },

        data() {
            return {
                selected: [],
                options: []
            }
        },


        methods: {
            select(value) {
                this.$emit('optionAdded', value.id);
            },

            remove(value) {
                this.$emit('optionRemoved', value.id);
            }
        }
    }
</script>

But when I look into vue devtools selected is always (when I receive a failed validation response from laravel):

selected:""

When I dd(old('organisations_working_at')); is not empty and is an array.

What could I be doing wrong?

2 revs, 2 users 78% · Accepted Answer · 2018-11-15 09:22:33Z

1

I believe you need to set your prop like:

prpSelected: {
  type: Array,
  default: []
}

And return the data so it's:

selected: this.prpSelected ? this.prpSelected : []

edited Nov 15, 2018 at 9:22

community wiki

2 revs, 2 users 78%
Alex Scott

Sign up to request clarification or add additional context in comments.

1 Comment

CodeTheorist Over a year ago

My apologies for the formatting, I'm answering on my iPhone.

Collectives™ on Stack Overflow

Laravel and vue pass array to prop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related