Question

我有一个laravel表单，并使用vue multiselect来选择多个用户。然后我将这些用户保存在我的数据库中。在编辑时，我可以获取用户，但我不知道如何附加它们。

{!! Form::open(['route' => 'store', 'files'=>true]) !!}
.....
<drop-down
        :options="options"
        :selected.sync="selected"
        :show-label="true"
        ></drop-down>
.....
{{Form::close}}

该组件如下所示：

<template>
    <div>
        <div>
            <label class="typo__label">Select Users to be notified</label>
                <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false"
                             :clear-on-select="true" :hide-selected="true"
                             placeholder="Select User" label="name"
                             track-by="name"></multiselect>
        </div>

        <div v-if="value">
                <input id="user_group" v-model="value" name="user_group" type="hidden">
        </div>
    </div>
</template>

<script>
   import Multiselect  from 'vue-multiselect'

   export default {
        components: {Multiselect},
        data: function () {
            return {
               value: [],
               options: []
                }
            },
        methods: {
            getUsers: function () {
                this.$http.get('/api/get/users').then(function (response) {
                    this.options = response.data;
                }, function (response) {
                    console.log(response)
                });
            }
        },
        created: function () {
            this.getUsers();
        }
    };
</script>

我想要的是能够看到我从后端传递的用户在我加载编辑表单时显示如下：还有如何显示所选用户以防出现重定向的验证错误在创建时输入。

Answer 1

最简单的方法是在子组件内的输入字段中处理@change，然后发出事件this.$emit('selected')，并在父组件中处理事件@selected='yourHandler'并触发必要的处理。 / p>

Answer 2

好吧，我没有找到使用Vue-multiselect的方法，但我找到了更好的解决方案。 Select2

赞成

它有单选和多选选项
它允许您使用普通的选择标签，这意味着它将完全像普通选择一样工作。
可搜索
以及更多...

在vue中，您需要使用这样的自定义指令：

使用npm

安装插件

require('select2');

Vue.directive('select', { twoWay: true, inserted: function (el) { $(el).select2(); } });

然后您可以按如下方式使用该指令：

Laravel Way

多个

{!! Form::select('users[]', $users,'' ,['required'=>'required', 'v-select'=>'', 'multiple'])!!}

单

{!! Form::select('user', $users,'' ,['required'=>'required', 'v-select'=>''])!!}

普通HTML

    <select placeholder="Search People" name="" id="" v-select>
            <option v-for="user in users" :value="user.id">{{ user.name }}</option>
   </select>

如何在编辑

2 个答案: