带有 Laravel 5.3 的 Vue 多选

Posted 2023-02-22

【中文标题】带有 Laravel 5.3 的 Vue 多选

【英文标题】：Vue-Multiselect with Laravel 5.3

【发布时间】：2017-02-09 02:40:14

【问题描述】：

我是 Laravel 和 Vue 的新手，需要帮助实现 Vue-Multiselect。

我不知道如何将实际选项传递给选择。

我的vue文件：

    <template>
    <div class="dropdown">
        <multiselect
                :selected.sync="selected"
                :show-labels="false"
                :options="options"
                :placeholder="placeholder"
                :searchable="false"
                :allow-empty="false"
                :multiple="false"
                key="name"
                label="name"
        ></multiselect>
        <label v-show="showLabel" for="multiselect"><span></span>Language</label>
    </div>
</template>

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

    export default 
        components:  Multiselect ,

        props: 
            options: ,
            placeholder: 
                default: 'Select one'
            ,
            showLabel: 
                type: Boolean,
                default: true
            ,
            selected: ''
        
    ;
</script>

我的刀片文件：

    <div class="form-group">
    <drop-down
        :options=" $members->list "
        :selected.sync="selected"
        :show-label="false"
     ></drop-down>
</div>

在我的控制器方法中，我尝试了一些方法：

1.

public function edit($id)

    ....
    $members_list = Member::orderBy('member_first_name')->pluck('member_first_name', member_id');
     return view('businesses.edit', compact('members_list'));

我收到了这个错误： [Vue 警告]：无效的道具：道具“选项”的类型检查失败。预期数组，得到对象。 （在组件中找到：）。

2.我试过了：

$members = Member::orderBy('member_first_name')->pluck('member_first_name', member_id');
$members_list = $members->all();
return view('businesses.edit', compact('members_list'));

我收到了这个错误： htmlspecialchars() 期望参数 1 是字符串，给定数组（视图：C:\wamp\www\ccf.local\resources\views\businesses\edit.blade.php）

3.

$members = DB::table('members')
            ->orderBy('member_first_name', 'asc')
            ->get();
        $members_list = array();
        foreach($members as $mem) 
            $members_list[$mem->member_id] = $mem->member_first_name;
        

我收到此错误：htmlspecialchars() 期望参数 1 为字符串，给定数组（视图：C:\wamp\www\ccf.local\resources\views\businesses\edit.blade.php）

所以我需要两件事的帮助：

如何将 $members_list 作为选项发送

如何组合 member_first_name 和 member_last_name 字段，以便获得如下选项：

选项值="member_id" 选项文本 = member_first_name member_last_name

谢谢

【参考方案1】：

在 laravel 内部使用 prop 绑定时，会尝试输出转义形式的变量。

您需要的是一个 javascript 数组。如果$members_list 返回一个集合，这似乎由您的其他代码指示，请尝试

<drop-down
    :options=" $members_list->toJson() "
    :selected.sync="selected"
    :show-label="false"
 ></drop-down>

至于你的控制器，这会有所帮助

$members = DB::table('members')
        ->orderBy('member_first_name', 'asc')
        ->get();

$members_list = $members->map(
    function($member) 
        return [
            "value" => $member->member_id,
            "label" => $member->member_first_name. " ". $member->member_last_name
        ];
    
);

Laravel Collections 有一个很好的函数选择，可以帮助操作数据，当你转换为 Json 时，会将你的成员数组映射到 value: "", label: "" 的结构。

最后别忘了在 vue 中设置你的 prop 绑定。

props: 
    options: 
        type: Array,
        default: function() 
            return [];
        
    ,...

这应该能让你继续前进。

【讨论】：

贾斯汀麦克阿瑟，上帝保佑你的灵魂 :) 非常感谢！

@SigalZahavi 可以在编辑表单时绑定值吗？