英文:
Vuetify Component v-select multiple show index/selection order
问题
我正在学习Vue.js，并且遇到了一些非常基础的问题。
我创建了一个多选的v-select（Vuetify组件），允许我从列表中选择一个或多个项目。
<v-select
dark
class="mb-5"
v-model="select_typeContrats"
:items="contrats"
label="Contracts"
multiple
chips
hint="按优先级选择"
persistent-hint
></v-select>
问题是，我想要的是当用户点击列表中的项目时，旁边会出现一个数字，以告诉用户他必须仔细选择以优先考虑提案，而不仅仅是验证框。
所以我的问题是如何实现这一点？是否可以使用v-select组件来实现？谢谢您未来的反馈！：D
英文:
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>
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
答案1
得分: 1
以下是翻译好的内容：
<template>
<div>
<v-select
class="mb-5"
v-model="select_typeContracts"
:items="contracts"
label="合同"
multiple
chips
hint="按优先顺序选择"
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: ['合同', '合同2','合同3','合同4','合同5']
}),
}
</script>
请注意，我将"Contracts"翻译为了"合同"，根据上下文可能需要根据实际需要进行调整。
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论