2

I'm starting on Vue.js and I'm stuck on something really basic.

I did a multiple v-select (Vuetify component) which allows me to choose one or more items from a list.

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

What it gives

Trouble! I would like that when we click on an item in the list, there is a number that appears next to it to show the user that he must choose well in order to prioritize proposals. Instead of just validating the box

So my question is how to do it? is it possible to do this with the v-select component? Thanks for your future feedback! : D

MONTES Irvin
  • 21
  • 1
  • how many options can they select? is the order of selection important or just remaining options? – depperm Jan 03 '20 at 13:03
  • There are 4 options, the selection order is important. I want them to be able to see in what order they selected the options contrats: [ "CDI client final", "CDI ESN", "Freelance", "Portage salarial" ] – MONTES Irvin Jan 03 '20 at 13:27
  • does it have to be a single v-select? I feel like having 4 with computed item props would make it clearer, order and remaining wise – depperm Jan 03 '20 at 13:28
  • I see what you mean, it can be a solution if I can't do it as I want. My client wants exactly what I asked for above. For him it's not complicated to add numbers according to the selection order :d – MONTES Irvin Jan 03 '20 at 13:47

1 Answers1

1

How about this:

<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>
EECode
  • 86
  • 4