Vuetify v-select动态填充/排序
Vuetify是一个基于Vue.js的UI组件库，提供了丰富的可复用的UI组件，包括表单、按钮、导航栏等。v-select是Vuetify提供的下拉选择框组件，可以实现动态填充和排序功能。
动态填充是指在下拉选择框中的选项是根据特定的条件进行动态加载和填充的。例如，当用户输入某个关键词时，下拉选择框可以根据关键词从服务器端获取匹配的选项，并动态显示在下拉列表中。这样可以提高用户体验，减少数据的加载量。
在Vuetify的v-select组件中，可以通过使用动态绑定的方式，将下拉选项和一个数组进行关联。当数组中的数据发生变化时，下拉选项也会相应地更新。具体实现的方式有多种，可以通过监听输入事件或者使用计算属性等。
排序是指在下拉选择框中的选项按照特定的规则进行排序。在Vuetify的v-select组件中，可以使用v-model指令来双向绑定选择框的值，并通过设置items属性来指定选项列表。同时，v-select组件也提供了item-text和item-value属性，用于指定选项中展示的文本和对应的值。
要实现动态填充和排序，可以在数据请求返回后对获取到的数据进行排序，并将排序后的数据赋值给选项列表。可以使用JavaScript的数组排序方法（如sort()）来实现排序功能。
对于Vuetify的v-select动态填充/排序功能，腾讯云并没有直接相关的产品或服务，但腾讯云提供了丰富的云计算基础设施和解决方案，如云服务器、容器服务、云数据库等，可以支持开发者构建和部署具有动态填充和排序功能的应用。
更多关于Vuetify v-select组件的详细信息和示例代码，可以参考腾讯云开发者文档中的Vuetify官方文档：Vuetify官方文档。
相关·内容
1回答
我正在尝试使用包含不同属性的JSON对象动态加载v-select (vuetify)组件，其中有多个选择组件，其中选项将由API提供，我希望每次都动态加载v-select组件，因为此模式可以用于其他组件，例如v-text-field。
问题是性别数组(其他类似的数组，如部门和管理人员)将由API提供，因此需要动态加载到v-select组件上，但是使用vm (View )我不能这样做。
我尝试过使用计算的属性和方法来检索性别数组，但没有成功。
Vue
<component :is="schema.component" v-model="jsonData[schema
浏览 2提问于2020-02-06得票数 1
如何使vuetify输入字段(v-select/v- input )更小？我说的更小是指减少内部空格/填充？ 这是我的标记： <div class="d-flex selects">
<v-select
:items="['Accepted', 'Pending']"
label="Accepted"
outlined
cla
浏览 31提问于2021-08-10得票数 1
2回答
如何使用VueJS将动态属性附加到VuetifyJS组件？
下面的VuetifyJS代码示例创建了一个select字段元素：
<div id="app">
<v-app id="inspire" style="padding: 10px; ">
<v-select
v-model="selectField"
:items="items"
multiple attach chips>
</v-select>
浏览 4提问于2021-01-10得票数 2
回答已采纳
2回答
我试图使用多重复选框填充vuetify组件，使用vuetify 1.5，问题是，当从它添加<template slot='item' slot-scope='{ item }'></template>时，它不会显示复选框，但是没有复选框会很好地工作。知道为什么会这样吗？
码
<v-select
label="Select Image"
v-model="selectedRepoImage"
:items="repoImages"
ite
浏览 5提问于2021-02-10得票数 0
4回答
正如您从下面可以看到的，我试图降低v-select元素的高度，但我可以设置的最小高度似乎是有限制的。也就是说，在height = 40之后，进一步降低身高似乎不再有效。这样我就可以使这个元素变小了吗？我需要这个，因为我需要把它装进一个相对较小的div中。提前谢谢-
new Vue({
el: "#app",
data: {
years: [2015, 2016, 2017, 2018]
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"
浏览 2提问于2018-11-18得票数 2
回答已采纳
4回答
有人能帮我设置v-select的默认值吗？请注意，我的v-select中填充了对象，我认为这可能是将item-value分配给我想要的初始值的原因：
<v-select
item-text="name"
v-model="defaultSelected"
:items="people"
>
Vue.use(Vuetify);
const vm = new Vue({
el: "#app",
data: {
defaultSelected: {
name: "John&
浏览 1提问于2018-07-18得票数 43
回答已采纳
尝试使用Vuetify组件时出现此错误。也许只是我对如何在Laravel中实现Vuetify组件缺乏了解。
Laravel v5.8.35，Vue v2.6.10，Vuetify v2.0.18。
错误：
Vue警告:呈现错误："TypeError:无法读取属性't‘的未定义“
找到位置
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./compone
浏览 1提问于2019-09-23得票数 7
回答已采纳
1回答
我需要填充一个Vuetify，但是它有一个问题，我的Get方法返回数据，但是vuetify只显示如下所示：
文本显示了有效数据：
[ { "id": 1 }, { "id": 2 } ]
为了填充选择，我按照文档添加了:items="entidades" and :item-text="entidades.id" and :item-value="entidades.id"
<v-select :items="entidades" :item-text="entidades.id
浏览 1提问于2018-04-19得票数 4
回答已采纳
1回答
填充值-动态下拉列表
、、、
我正在尝试用值填充dropdowns，而dropdowns则是通过道具“发送”的。我正确地从服务器获取数据，并将其存储在数组中，我使用该数组填充选定的下拉列表。这个问题看起来像是Vuetify或Vue的bug，但我不确定。
动态下拉列表的代码如下所示(Vuetify)：
<v-col cols="12" lg="2" md="2" sm="6" xs="6" v-for="(dropdowns, index) in dropdownNumber" v-bind:key="ind
浏览 9提问于2020-03-16得票数 0
回答已采纳
1回答
我有一个，是我用Vuetify制作的。如何对这个v-select中的项的名称从最大到最小进行排序？
<v-select
v-model="selectedFruits"
:items="fruits"
label="Favorite Fruits"
item-text="text"
return-object
multiple
>
fruits: [ { text: 'x', id: '1'},
{ text: 'y', id
浏览 9提问于2022-11-29得票数 1
VSelect保留了用户选择值的顺序(根据v-model)，但我们需要它们始终按:items的顺序排列 <div id="app">
<v-app id="inspire">
<v-card>
<v-container fluid>
<v-row
align="center"
>
<v-col cols="12" sm="6">
浏览 16提问于2020-03-19得票数 0
回答已采纳
3回答
我在vuetify的v-select组件上使用"item-disabled“属性时遇到了问题。我尝试将其与文本选项一起使用。
以下是重现该问题的代码片段：
在本例中，我想禁用"Buzz“选项。
Vue.use(Vuetify)
new Vue({
el: '#app',
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
disabledItems: ['Buzz'],
})
})
<
浏览 7提问于2019-05-15得票数 6
回答已采纳
我安装在应用程序js中的所有东西来工作v-select，我不知道在安装或not.if中有什么东西丢失了告诉我v-select标签中有什么东西不对劲如果有人经历过这样的事情请帮助 在app.js-上 require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Cat from './components/dashboard/category/Category.vue';
import Sub fro
浏览 32提问于2020-10-27得票数 0
我是这里的初学者。我正在创建一个vuefity表单，其中有三个<v-file-input>，每个都有一个<v-select>选项。我想在值更改时将<v-select>中的值附加到它各自的<v-file-input>的标签中。
请帮帮我，解决这个问题。CodePen：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['one', 'two', 'three']
}
浏览 4提问于2019-11-28得票数 1
我使用的是vuetify的v-select组件。我正尝试在下拉列表中添加一个搜索栏选项。
有没有什么内置的方法可以做到这一点。我使用的是vuetify版本1.0.5。
<v-select
:items="users"
attach
item-text='name'
item-value='name'
v-model="association.name"
:rules='nameRule'
label="First Name&
浏览 19提问于2020-04-08得票数 2
1回答
样式化Vuetify选择器
、、、、
选择器的Vuetify组件是：
<v-select
:items="items"
label="Standard"
></v-select>
但当选择器处于活动状态时，会出现许多嵌套组件(在检查时)，例如，下拉菜单本身menu__content。我该如何设计它的样式呢？对于“可见”的Vuetify组件v-select，我可以手动添加一个类，并直接在css中设置它的样式。但是，我不能对隐藏的组件执行此操作。
我尝试使用检查给定的类".menu__content“设置样式，但似乎不起作用：。
如何在css中手动设置这些组件的样式？关于
浏览 7提问于2018-08-07得票数 8
回答已采纳
我正在尝试使用ajax调用中检索的数据填充vuetify复选框。我不知道如何使用这些数据填充复选框。ajax调用工作，我得到一个对象数组，我设置的对象等于项。这就是我尝试过的：
V-选择
<v-select
:items="items"
item-text="test"
v-model="client"
label="Choose a Client"
class="input-group--focused"
item-value="text"
></v-select>
获取客
浏览 0提问于2018-04-18得票数 0
回答已采纳
1回答
我不想让菜单覆盖输入框。我的版本是2.3.18。我该怎么解决这个问题？
我发现了这个，但它对我不起作用：
我发现了一个Vuetify bug：
验证v-select代码示例：
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {
},
data () {
return {
select: { state: 'Florida', abbr: 'FL' },
hideDetails: false,
items: [
浏览 1提问于2020-11-23得票数 3
回答已采纳
如何筛选数据以根据对另一个选择的选择来填充另一个选择？例如，我从一个select中选择一个州，第二个select将加载来自该特定州的所有城市。我使用vue.js和vuetify作为框架(使用v-select组件)。我试图设置一个计算属性，但即使我从第一个select中选择，第二个也不会加载数据。
HTML
Vue.use(Vuetify);
var app = new Vue({
el: '#app',
data() {
return {
items: {
home_id: null,
},
suppor
浏览 0提问于2017-07-21得票数 11
回答已采纳
因此，我正在使用Vuejs / Vuetify创建一个web表单，我需要为用户提供一个编辑现有数据的选项。当我在编辑页面上时，我有一个"item“对象，其中包含用户可以编辑的所有属性/值。我可以通过v-model将它们绑定到v-text-field，而不会出现问题。将现有值绑定到v-select组件时会出现问题。它不会用它绑定的v-model的值填充v-select框。同样值得注意的是，我需要传递给后端的是品牌id，但我需要向UI显示的是品牌名称(字符串)。
<v-select
:items="brandOptions"
:error-message="
浏览 0提问于2018-03-06得票数 0
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Please help **
<template>
<v-app id="inspire">
<v-container align="center">
<v-row>
<v-col cols="12" sm="3" class=&
浏览 2提问于2022-01-24得票数 -1
回答已采纳
1回答
我正在测试Vuetify 3 (npm:@vuetify/nightly@next) v-select并尝试获取更改事件。但是，没有调用我的处理程序函数。这是我的密码：
TS:
export default defineComponent({
setup() {
function onLanguageChange(a: any) {
console.log(a);
}
const items = ['Русский', 'English'];
return {onLanguageChange, items}
浏览 34提问于2022-02-11得票数 7
回答已采纳
我已经使用vuetify创建了一个对话框，我希望它能够预先填充v-select中的数据，但是当我打开对话框模式时它是空的。我已经将propPackage分配给了selectPackage，它在v-select中的v-model中使用。打开对话框时，应该如何预填充它？
对话框
<template>
<v-row justify="center">
<v-dialog v-model="dialog" max-width="600px" @click:outside="close">
浏览 2提问于2021-11-23得票数 1
回答已采纳
我开发了aspnet核心项目。我正在使用Vuejs，vuetift和v-运行时模板。当我绑定到动态vuetify公司(v-select)到v运行时模板时，COmbobox不工作稳定的css。我如何解决这个问题？
我的示例代码：
运行时-模板项目github：
浏览 0提问于2018-10-30得票数 0
回答已采纳
我已经在我的Vue cli应用程序上安装了Vue Select组件，但选择行为类似于普通的v-select。我已经使用它的官方文档安装了。
这是安装程序
npm install vue-select
Then, import and register the component:
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
The component itself does not include any
浏览 1提问于2020-11-23得票数 1
3回答
V-选择组件宽度变化
、、、
我的v-select组件应该有一个固定的宽度(60 in )，它们适合于表格单元格，我希望防止它们在选定值后更改宽度。
他们改变宽度和下拉箭头后，向右移动，因此，如果有办法减少一个图标的大小或它的填充/边距，这可能是有帮助的。
不知道如何得到这个箭头的道具，以及它是如何调用的。
这是可复制的
编辑:添加片段
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&#
浏览 16提问于2021-06-21得票数 13
回答已采纳
1回答
我使用Vuetify创建我的下拉列表。我可以选择一个值，将其推送到firebase数据库，但是刷新页面时，我无法填充下拉列表。
下面是模板：
<template>
<v-select
v-bind:items="itemsPhone"
v-model="telephoneType1"
id="telephone-pro-type-1"
label="Select"
浏览 1提问于2017-11-20得票数 0
回答已采纳
1回答
无法编写测试验证v-select @change事件的测试。事件处理程序select_change不调用内部测试。
Demo.vue
<div>
<v-select @change="select_change" :items="[1,2,3]" v-model="value"></v-select>
</div>
export default {
data() {
return {
va
浏览 2提问于2020-04-02得票数 3
1回答
如果我采用标准的Vuetify示例，并将卡路里更改为包含String，现在数据并不全是数字：
那么Vuetify在内部使用哪个比较器来对这些字符串进行排序？
假设我有另一个页面，上面有一个v-select，我想给用户提供表中另一个页面上的所有卡路里选项，并且我想以与卡路里按升序排序时它们在表中的相同顺序显示它们。我怎么才能复制呢？
我认为在填充v-select之前，我需要做一些类似的事情(这并不是很正确地对它们进行排序，但我认为它会是类似的)：
calories.sort((a, b) => a.localeCompare(b, undefined, { numeric: true, s
浏览 0提问于2020-05-26得票数 0
目前，我正在使用Nightwatch.js与Chromedriver一起执行我的Vuetify应用程序的e2e测试。然而，测试结果是不确定的。
很多时候，我在运行Timed out while waiting for element <.menuable__content__active> to be present for 5000 milliseconds.后运行waitForElementVisible('.menuable__content__active', 5000)时会遇到类似于：click('.v-select')之类的错误，而有时它
浏览 0提问于2018-09-26得票数 4
回答已采纳
2回答
我无法降低Vuetify下拉组件v-select的高度。我尝试使用props dense，但它只减少了要选择的选项的高度，并且对关闭的下拉列表没有任何影响。 我尝试了以下模板代码： <v-select :items="selectableYears" dense outlined></v-select> 文档中的示例代码非常相似： <v-select
:items="items"
label="Outlined style"
dense
outlined
></v-sel
浏览 54提问于2019-10-02得票数 3
回答已采纳
1回答
在使用Cypress为Vuetify页面编写E2E测试时，我在从<v-select>或<v-autocomplete>中选择一个或多个元素时遇到了困难
只要选择只有几个选项，就能正常工作。
问题是:如果您的组件选择了许多选项，Vuetify只会在其弹出窗口中呈现接近相应滚动条位置的选项，这意味着您需要选择的选项可能不可见，因此无法通过Cypress进行选择。
有人知道在Vuetify <v-select>/<v-autocomplete>上访问元素的可靠方法吗?即使select有太多的选项？
浏览 5提问于2021-06-28得票数 6
1回答
我与vuetify工作，但我注意到，v-select下拉菜单不工作，我已经尝试谷歌，但最终一无所获，请协助这一点。我会很感激的，谢谢
<v-select label="City" items="items" ></v-select>
data:function(){ items:["Mumbai","Capetown"]}
浏览 3提问于2020-02-14得票数 0
1回答
我正在使用虚拟材料库，我有一个v-select，并分配给它的项目。如何做到只有在选定的项目中的按钮将被启用时才能这样做？
这是一个示例。
new Vue({
el: '#app',
data() {
return {
items: [
'Foo', 'Bar', 'Biz', 'Buzz'
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/
浏览 4提问于2020-01-10得票数 0
回答已采纳
3回答
我看到了一些关于v-select和插槽的文档，但是我并不真正理解我是否可以将它应用到我的示例中。
我只需要获得所选的文本(而不是值)，并在代码中的某个地方使用它：
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
state: {},
selectedText: "",
states: [
{ value: "a", text: "alpha" },
{ value: "b", text: &#
浏览 6提问于2020-04-01得票数 1
回答已采纳
我有一个简单的设计，在大屏幕和小移动屏幕上都需要遵循，它基本上是由连字符并排分隔的两个输入/选择框。这是线框图的截图： ? 就像看起来那么简单，我似乎不能让网格系统用那个连字符为我工作。无论我做什么，它都会破坏布局。 我已经在屏幕上尝试了一些不同的cols值，但都没有用。 这就是我目前正在使用的应用程序的样子(忽略选择框的样式，重要的部分是它们彼此之间的布局和分隔它们的连字符)： new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div style="{ mar
浏览 41提问于2020-11-17得票数 0
回答已采纳
1回答
我已经添加了vuetify插件，其他组件运行良好，但是当我在我的自定义组件上添加v-select时，它没有加载默认的Css显示，比如up pic。
<v-select :items="items" label="Standard"></v-select>
data() {
return {
items: [
{ title: "Click Me" },
{ title: "Click Me" },
{ title: "Click Me" },
浏览 2提问于2022-07-14得票数 1
回答已采纳
我用过Vuetify.js和打字本。现在我已经试着理解使用Vuetify组件使用的类型记录。Vuetify.js中的所有组件样本都是用Javascript编写的。对于像我这样的初学者来说，使用它真的很困惑。现在我的代码中有一些问题。
我只想确认v-select函数并编写代码。但是它没有工作，404没有找到错误。我检查了控制台，但没有出错。有人建议我吗？
<template>
<v-container>
<v-row align="center">
<v-col class="d-flex"
浏览 3提问于2020-08-12得票数 0
回答已采纳
我对Vue/Vuetify非常陌生。我正在为我正在做的网站做选择选项，我想使用一个图标作为标签，而不是文本。我想做一些像下面的图片，但我不确定这是否可能。如有任何指导，将不胜感激。
谢谢!
<div id="app">
<v-app class="container">
<v-select
v-model="select"
:items="permissions"
label="Select"
item-text=&
浏览 0提问于2021-06-16得票数 2
回答已采纳
2回答
总结问题
我正在尝试将Vuetify实现为现有项目的一部分。但在我将Vuetify添加到项目中之后。我发现类似输入字段，select的“默认”CSS样式被改变了。它使这些输入字段和选择看起来都像纯文本，而不是输入字段和选择。
因为我只想为项目的一部分实现Vuetify，所以Vuetify覆盖了“默认”CSS规则是不好的。
我正在寻找一种方法来实现现有项目的一部分。但项目的其余部分应该呈现为正常(只使用默认CSS，而不是我自己的CSS)。
为了使问题更清晰，我将举一个例子，它显示了两个选择。第一个是用Vuetify <v-select>制作的，第二个是用普通的HTML代码<se
浏览 1提问于2019-01-21得票数 7
我有一个v-select vuetify组件，我有一个对象，其中key是Id，value是name，我想对每个v-select项，value是Id，text是name，怎么做呢？ 我的对象的示例是{"1":"calculus 1","2":"linear algebra"}
浏览 24提问于2019-10-16得票数 0
1回答
我使用Vuetify，我有这样的选择： <v-select
v-model="gender.value"
:items="gender.items"
label="Gender"
:solo="true"
append-icon="">
</v-select>
....
data: () => ({
gender: {
value: null,
items: ['male', 'fema
浏览 6提问于2020-08-15得票数 2
1回答
我是VUEJS的新手，我在从包含JSON对象数组的本地json文件中使用国家名称填充vuetify select元素时遇到了问题。它为每个国家/地区创建单选对象，而不是填充选项。
这是我的表格..。
<form>
<v-select v-validate="'required'" v-bind="countryData"
v-for="item in countryData" :key="item.name" :items="item.name"
v-model=
浏览 10提问于2018-12-15得票数 1
回答已采纳
2回答
我有一个项目，包括文本字段，按钮和一个特定的表单设计。我正在使用Vuetify来实现这一点，但是有一个问题我不知道如何处理: Vuetify组件维度似乎是不可更改的。
例如：
我希望v-text-field，v-select和v-btn有相同的高度，而<v-select>相对于按钮有一点宽。
有什么办法可以在武帝酒店做到这一点吗？还是由CSS叠加处理？
浏览 1提问于2022-04-03得票数 -1
1回答
我试图在我的Vuetify v-select组件中选择多个项目，但我不想(在一行中或使用芯片)显示它们，我希望文本只说“selected”。Vue是新手，所以不太确定从哪里开始，但是下面是我为v-select组件编写的代码：
<v-select
v-else-if="isMobile"
class="customizable-dropdown"
:items="getSortedItems"
:label="$t('dropdown.label.all')"
multi
浏览 3提问于2021-06-21得票数 1
回答已采纳
我正在尝试动态填充和排序v-select使用的数组。然而，我遇到了es-lint警告‘计算属性中的意外副作用’，因为我在那个调用中改变了对象。是否有更合适的模式将新数据追加到数组中并对其进行排序？下面是一些快速而肮脏的框架代码，可以帮助您理解要点 // SomeFile.vue
<MySelectComponent :someData="changingArray" />
// MySelectComponent.vue
<v-select v-model="selectedItems" :items="mergeWithNewDa
浏览 27提问于2019-02-22得票数 0
回答已采纳
我是Vuetify的新手，在检索v-select组件上所选选项的索引时遇到了一些问题。
一旦我有了索引，我想根据点击的选项填充一个文本字段。
我有一个从firebase检索的对象数组，并作为:items属性传入。
我可以使用带有v- select的标准事件选项成功地获取索引，以遍历数组，然后使用@change调用一个函数，该函数使用事件对象获取selectedIndex。然而，当我尝试使用v-select组件时，我似乎无法理解它
这是可行的：
<select @change="populateLicense" v-model="trim.shop">
浏览 40提问于2019-07-23得票数 4
1回答
选定国家时，必须在“选择”选项中显示国家标志。我要在Vue做这个。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
select: null,
countries: [
{
name: "Albania",
flag: "em-flag-al"
},
{
name: "Anguilla",
flag: "em-flag-ai"
}
],
}
})
<div id="app"&g
浏览 7提问于2022-07-23得票数 0
回答已采纳
我刚接触vuetify，我想知道是否有一种方法可以为带有函数的v-select赋值。我有一个可以创建企业的完整表单。我使用apollo.js来连接我的数据库。当我尝试修改企业时，所有字段都正确填充，但我希望v-select显示与用户设置相同的值。我在“修改”页面中的v-select代码： <v-select
item-text="text"
item-value="value"
v-model="defaultSelected"
:items="qualifications"
menu-props="au
浏览 27提问于2021-04-15得票数 0
回答已采纳
私人的，
我正在使用Vuetify v- select，当单击一个按钮时，如果没有向用户显示他需要在v-select中选择一些数据，检查是否选择了v-select？我不能做这些检查。
<v-select
dense
label="Local de Estoque"
outlined
:items="LocalEstoques"
item-text="descricao"
item-value="id"
浏览 1提问于2022-03-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
