首页 文章

Vue-Multiselect与Laravel 5.3

提问于
浏览 次
3

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

我不知道如何将实际选项传递给select .

我的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警告]：无效道具：对于道具“选项”类型检查失败 . 预期的数组，得到了对象 . （在组件中找到:) .

我试过：

$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 \ _suprises \ 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 \ _suprises \ edit.blade.php）

所以我需要帮助两件事：

  • 如何发送$ members_list作为选项

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

option value =“member_id”选项text = member_first_name member_last_name

谢谢

laravel-5 vue.js multi-select

1 回答

  • 4

    当在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中设置你的道具绑定 .

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

    这应该让你去 .

    回复于

相关问题