标签: v-select
Vuetify,js - 是否可以默认打开 v-select？有这样的选择吗？
v-select 中是否有一个选项可以定义默认情况下打开选项/项目插槽，就像我单击了选择区域一样？
推荐指数
解决办法
查看次数
Vuetify v-select 组件宽度改变
我的v-select组件应该有一个固定的宽度 (60px)，它们适合一个表格单元格，我想防止它们在选择值后改变宽度。
他们改变宽度，选择后下拉箭头向右移动，所以如果有办法减小图标的大小或其填充/边距，它可能会有所帮助。
真的不知道如何获得这个箭头的道具以及它是如何调用的。
这是可重现的
https://codesandbox.io/s/competent-dew-eixq2?file=/src/components/Playground.vue
编辑：添加片段
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
.select {
max-width: 60px;
max-height: 60px;
font-size: 11px;
}
.col {
max-width: 60px;
max-height: 60px;
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-row>
<div class="col" v-for="col in cols" :key="col">
<v-select class="select" :items="variants" item-value="name" item-text="name" label="" dense outlined hide-details single-line v-model="selected">
</v-select>
</div>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.js"></script>
<script> …推荐指数
解决办法
查看次数
Vuetify 2.1 V-Select 更改后重置或清除选择
我必须修复一个从 Vue 类扩展并包含 V-Select 组件的 vuetify 自定义组件。下拉菜单工作正常，但由于它只是弹出打开模式的触发板，因此要求是在 onchange 事件后重置/清除下拉选择。基本上我认为我需要触发clearableCallback，但我不知道如何做到这一点。首先，我遇到的问题是，当我从父组件绑定方法时，作用域始终是父组件，因此 this 指的是扩展父组件类。所以我想知道如何进入 v-select 组件的范围。除了可清除的道具之外，我看不到我想要做的事情没有本机功能。有什么提示吗？谢谢
推荐指数
解决办法
查看次数
在 v-select 中更改芯片的样式和颜色
如何更改芯片的颜色和样式v-select？
我有这样的代码：
<v-select
v-model="value"
:items="roles"
:menu-props="{ top: true, offsetY: true }"
small-chips
label="Roles"
multiple
hint="Select the role"
persistent-hint
>
</v-select>
如何将筹码更改为样式标签和蓝色？
推荐指数
解决办法
查看次数
Vuetify - 如何在自定义文本时包含复选框以进行 v-select
如何在自定义文本时从 v-select 添加复选框而不覆盖multiple.
<v-select
v-model="selectedRepoImage"
:items="repoImages"
item-text="fulltag"
item-value="repo_image_id"
multiple>
<template v-slot:selection="{ item, index }">
<template v-slot:selection="{ item, index }">
<v-chip v-if="index === 0">
<span>{{item.fulltag}}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text caption"
>(+{{ selectedRepoImage.length - 1}} others)</span>
</template>
</template>
<template v-slot:item="{ item }">
//checkboxes ??
//item.name ??
</template>
</v-select>
推荐指数
解决办法
查看次数
Vuetify：编辑 v-select 的无数据文本属性或无数据槽似乎没有任何效果
我在 Nuxt 项目中使用 Vuetify。no-data通过使用a 中的插槽，v-data-table我能够修改“无可用数据”消息。如果我使用 prop ，它也可以工作no-data-text。
<v-data-table>
<template slot="no-data">
My no data message
</template>
</v-data-table>
或者
<v-data-table no-data-text="My no data message"></v-data-table>
由于 v-select 的文档显示了相同的 prop 和 slot，我也尝试更新该消息，但仍然显示“无可用数据”而不是我自己的消息。难道我做错了什么？
我发现的唯一可能相关的其他主题是https://github.com/vuetifyjs/vuetify/issues/2081
预先感谢您的任何帮助！
推荐指数
解决办法
查看次数
使用 cypress，如果“<v-autocomplete>”有太多项目，如何在“<v-autocomplete>”上选择一个项目
在使用 Cypress 为 Vuetify 页面编写 E2E 测试时，我遇到了从 a<v-select>或 a中选择一个或多个元素的困难<v-autocomplete>
只要选择上只有几个选项，先前存在的问题的答案就可以正常工作。
问题是：如果您的组件选择了许多选项，Vuetify 将仅渲染靠近其弹出窗口上相应滚动条位置的选项，这意味着您需要选择的选项可能不可见，因此无法通过 Cypress 选择。
有谁知道访问 Vuetify 上的元素的可靠方法<v-select>/<v-autocomplete>即使选择有太多选项？
推荐指数
解决办法
查看次数
Vuetify - 如何轻松访问 v-select item-text 值？
我想知道当项目已绑定到 v-select 并且它与 item-value 值分开时，如何轻松访问 v-select 的 item-text 值？我希望将 item-value 值保存到我的 v-model 中，然后还通过 on Change 事件传递 item-text 值，如下所示：
<v-select v-model="id" :items="items" item-value="id" item-text="name" v-on:change="getItemText(name)" />
如果我添加对 v-select 的引用，然后通过以下方式访问它，我可以获得该值：
this.$refs.vselect.selectedItems[0].name;
但是当数据位于 v-select 本身中时，这似乎有点啰嗦。如果有人知道更简单的方法，我很乐意听到它！
谢谢！
推荐指数
解决办法
查看次数
如何测试 vue.js v-select 组件的值
v-select我有一个使用 vue.js 和货币下拉列表的表单设置。我正在尝试创建一个单元测试以确保 v-select 的当前值设置为计算值price_currency
这是选择器的 vue 代码
<v-select
name="price_currency"
:value="price_currency"
@input="value => this.updateValue('price_currency', value)"
:options="currencies"
v-validate="validate.select"
:selectOnTab="true">
</v-select>
设置:value为price_currency计算值。在单元测试中，我可以使用 find 方法来v-select返回元素，但因为它是一个 vue 组件而不是实际的<select>元素value，所以没有设置，这意味着我无法测试它。
如何为上述内容编写单元测试v-select以确认该字段设置为 的计算值price_currency？此外，我想测试price_currencyv-select 上的值何时更新，但可能一旦我看到测试值的示例，其余的就会到位。
这似乎是一个相当简单的测试，但我在文档或在线任何地方都找不到如何完成此操作的好示例。
对于我的单元测试，我使用 VueTestUtils 和 Jest。
推荐指数
解决办法
查看次数
Vuetify：如何在 v-select 组件中指定所选项目的背景颜色
我在 Vue 应用程序中有一个 v-select 小部件（组合框/选择）。当我打开它并将鼠标悬停在选项上时，该选项的背景颜色会突出显示（当前为浅灰色）。当鼠标箭头悬停在选项上时，我希望背景颜色具有不同的颜色。我看不到支持此功能的 v-select 小部件的属性。有办法实现这一点吗？
v-select::hover {
background-color: "#00857A";
}
<v-select
append-icon="../assets/img/sy-arrow-chevron-down.svg"
background-color="white"
:height="68"
item-text="label"
item-value="key"
class="mr-3"
v-model="type"
:width="421"
:items="searchCriteria"
@change="performSearch()"
></v-select>
推荐指数
解决办法
查看次数