时间戳

首页 > 解决方案 > Vuetify Component v-select 多个显示索引/选择顺序

vue.js - Vuetify Component v-select 多个显示索引/选择顺序

问题描述

我从 Vue.js 开始，我被困在一些非常基本的东西上。

我做了一个多重 v-select（Vuetify 组件），它允许我从列表中选择一个或多个项目。

      <v-select
        dark
        class="mb-5"
        v-model="select_typeContrats"
        :items="contrats"
        label="Contracts"
        multiple
        chips
        hint="Select in order of preference"
        persistent-hint
      ></v-select>

它给了什么

麻烦！我希望当我们单击列表中的某个项目时，它旁边会出现一个数字，以向用户显示他必须选择好才能确定提案的优先级。而不仅仅是验证盒子

所以我的问题是怎么做？是否可以使用 v-select 组件执行此操作？感谢您未来的反馈！: D

标签： vue.jsuser-interfaceindexingvuetify.jsv-select

解决方案

这个怎么样：

<template>
<div>
<v-select
    
    class="mb-5"
    v-model="select_typeContracts"
    :items="contracts"
    label="Contracts"
    multiple
    chips
    hint="Select in order of preference"
    persistent-hint
  >

 <template v-slot:item="{item, attrs, on}">

 <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
        <v-list-item-action>
          <v-checkbox :ripple="false" :input-value="active"></v-checkbox>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>
            <v-row no-gutters align="center">

 <div v-if="select_typeContracts.includes(item)">
  {{ (select_typeContracts.indexOf(item)+1)+': '+item}} 
 </div><div v-else>
  {{item}} 
  </div>
 </v-row>
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
 </template>
  </v-select>
 </div>
 </template>

  <script>
  export default {
  data: () => ( {
    select_typeContracts: '',
    contracts: ['contract', 'contract2','contract3','contract4','contract5']
}),
}
</script>

推荐阅读