Home / Questions / 158598
Accepted
Felipe
Asked: 2020-04-24 17:09:44 +0800 CST 2020-04-24 17:09:44 +0800 CST

如何使用 VueJs 和 Laravel 创建多选

  • 772

我需要multiselect在我正在处理的视图中实现一个，这个想法是在同一个select. 我尝试了一些在网上找到的组件，但效果不佳。

Laravel 中的控制器路由和方法工作正常。

我必须从带来数据的方法中提供多选，如果你能帮助我，那就太好了，我把代码留给你

事件.vue

<template>
   <div>
     <div class="col-sm-12">
       <select class="form-control form-control-line"> 
           <option v-for="coin in coins" :key="coin.id" value="coin.id">
               {{ coin.name }}
           </option>
       </select>
   </div>
</template>
<script>
    export default {
    data () {
       coins: [],
     },
    created() {
        this.getCoins();
    },
    methods: {
        getCoins(){
            let urlCoin = '/dashboard/coins';
            axios.get(urlCoin)
                .then((response) => {
                    this.coins = response.data;
                })
                .catch((err) => {

                })
        }
    }
</script>

我们的想法是实现这一目标

在此处输入图像描述

我使用Laravel 5.6和VueJS 2

javascript

1 Answers

  1. Best Answer

    你可以使用这个库vue-multiselect 来达到预期的效果，在你的页面上有基本的配置。而且由于您使用的是单文件组件，它会更加容易。

    基本部分是:options它将包含从 PHP 获取并coins在组件安装后分配给的数组(mounted())，因为它可能会添加到后续请求中，它用于v-model绑定数据，它将包含选定的元素。

    Label, 将是模拟 a 显示text的内容option，track-by模拟valuea 的显示option

    您必须首先通过npm库或通过cdn

    npm install vue-multiselect --save

    然后就可以在组件中使用它（硬币名称和硬币属性由您选择）

    组件.vue

    <template>
    <div>
        <multiselect
        v-model="coin"
        :options="coins"
        :multiple="true"
        label="name" 
        track-by="id"
        placeholder="Seleccione uno o más Coin">
        </multiselect>
    </div>
</template>
<script>
    import Multiselect from 'vue-multiselect';

    export default {
        data(){
            return {
                coins: [],
                coin : '',
            }
        },
        components: { Multiselect },
        mounted(){
            this.getCoins();
        },
        methods  : {
            getCoins(){
                axios.get('/dashboard/coins')
                .then((response) => {
                    this.coins = response.data;
                })
            }
        }
    }
</script>
<!-- Estilos de la libreria -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
    • 2