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

How to create a Multiselect with VueJs and Laravel

  • 772

I need to implement a multiselectin the view I'm working on, the idea is to have several options selected in the same select. I have tried some components that I found on the web but without good results.

Controller route and method in Laravel works fine.

I have to feed the Multiselect from a method that brings the data, If you can help me it would be great, I leave you the code

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

The idea is to achieve this

enter image description here

I use Laravel 5.6andVueJS 2

javascript

1 Answers

  1. Best Answer

    You can use this libraryvue-multiselect to achieve the expected result, on your page there is the basic configuration. And since you are using the Single File Component it will be even easier.

    The basic parts is :optionsthat it will contain the array that is obtained from PHP and assigned to coinsafter the component has been mounted (mounted()) , as it will possibly be added to a subsequent request perhaps, it is used v-modelto bind data , it will contain the selected elements .

    Label, will be what will be displayed simulating that textof a option, track-bysimulating that valueof aoption

    You must first install through npmthe library or through acdn

    npm install vue-multiselect --save

    Then it will be possible to use it in the component (the names of the coins and coin properties are left to your preference)

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