Question

我需要在我正在工作的视图中实现多选，想法是在同一个选择中选择几个选项。我尝试过在网上找到的一些组件但没有很好的结果。

Laravel的路线和司机方法运作良好。

我必须从带来数据的方法中提取Multiselect

如果你能帮助我，那就太棒了，我留下了代码

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

            })
    }
 }

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);
   }

}

这个想法就是这样做

Multiselect

我使用了Laravel 5.6和Vuejs

Answer 1

您无法使用基本select标记来显示从服务器获得的多个选定值...因为它仅支持选择一个选项..如果您想选择多个像您的图片，则必须添加更多像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) => {

            })
    }
 }

使用Vue和Laravel进行多选

1 个答案: