Question

我有一个看起来像这样的多选组件：

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

如您所见，我从laravel传递old('organisations_working_at')值。

我的组件看起来像这样（我围绕另一个多选择做了一个包装）：

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

但是当我查看vue devtools总是选择（当我从laravel收到失败的验证响应时）：

selected:""

当我dd(old('organisations_working_at'));不为空且是一个数组时。

我可能做错了什么？

Answer 1

我相信你需要设置你的道具：

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

然后返回数据：

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

Laravel和vue将数组传递给prop

1 个答案: