Multiselect with Vue and Laravel

Question

I need to implement a multiselect in the view in which I am working, 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.

The route and the driver method in Laravel work well.

I have to feed the Multiselect from a method that brings the data

If you can give me a hand it would be great, I leave the code

<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) => {

            })
    }
 }

My Method in the CoinController

class CoinController extends Controller
{
   public function __construct()
   {
       $this->middleware('auth');
   }

   public function coinList() {
       $coins = Coin::orderBy('rank', 'asc')
                    ->select('id', 'name', 'rank')
                    ->get();
       return response()->json($coins);
   }

}

the idea is to do this

Multiselect

I used Laravel 5.6 and Vuejs

I want to say that I need to do a multiselect for a selectmenu in my select option in my view — Felipe
that's a tag feature which is custom. If you just want a select box with multiple tags then add the multiple attribute w3schools.com/tags/att_select_multiple.asp — A. L

Saengdaet Saengdaet · Accepted Answer · 2018-04-24T03:58:04

You can't use basic select tag to show multiple selected value that you get from server.. because it only support to select one option.. if you want to select multiple like your pict, you have to add more library like vue multiselect

<multiselect v-model="value",
            :options="coins",
            :multiple="true",
            :close-on-select="false",
            :clear-on-select="false",
            :hide-selected="true",
            :preserve-search="true",
            placeholder="Pick some"
            label="name",
            track-by="name",
            :preselect-first="true" >
    <template slot="tag" slot-scope="props">
         <span class="custom__tag">
             <span>{{ props.option.language }}</span>
             <span class="custom__remove"
                   @click="props.remove(props.option)">
                   x
             </span>
         </span>
    </template>
</multiselect>
<script>


export default {
   data () {
     value: [],
     coins: [],
   },
   created() {
      this.getCoins();
   },
   methods: {
      getCoins(){
        let urlCoin = '/dashboard/coins';
        axios.get(urlCoin)
            .then((response) => {
                this.coins = response.data;
            })
            .catch((err) => {

            })
    }
 }

Multiselect with Vue and Laravel

1 Answers