标签: vue-select
将图像添加到 Vue Select 下拉列表？
我使用vue-select组件作为我的下拉列表，并将其:options作为数据放入下拉列表。我现在将它用于信用卡下拉列表，并希望在每个下拉行中添加卡类型图像。这可能吗？
推荐指数
解决办法
查看次数
在单元测试中触发 vue-select 下拉项选择
问题：无法在单元测试中以编程方式触发 Vue-Select3 项目下拉选择。
我已经尝试使用vue-test-utils和@testing-library/vue以及在浏览器中以编程方式触发点击事件以强制选择列表项。然而，这些都没有奏效。我设法触发选择的唯一方法是获取 VueSelect 实例并发出“输入”事件。我还尝试在下拉容器等上触发不同的事件。
// Failed
// testing-library
const dropdownItem = getAllByTestId('dropdown-item')
fireEvent.click(dropdownItem[0])
// test-utils
wrapper.find('[data-testid=dropdown-item]').trigger('click')
// In browser
document.querySelectorAll('.vs__dropdown-item')[0].click()
// Success
wrapper.find(VueSelect).vm.$emit('input', payload)
当前结果：当点击事件被触发时，什么也不会发生。 预期结果：当点击事件被触发时，Vue-Select 应该选择该项目并发出 'input' 事件。
推荐指数
解决办法
查看次数
在 Vue Select 中设置所选值的样式
我正在使用 vue 选择。在下拉列表中，有标签（不仅仅是文本）。是否还可以有所选值的标签？
<div class="form-group row">
<label for="project_status_id" class="col-sm-3 col-form-label">Projekt Status</label>
<div class="col-sm-9">
<v-select :options="resources.activeProjectStatus" :reduce="project_status_id => project_status_id.id" v-model="form.project_status_id" label="name" id="project_status_id" placeholder="Projekt Status" :class="$vSelectStyle($v.form.project_status_id)">
<template v-slot:option="option" >
<div v-html="option.status_label" class="mb-1">
</div>
</template>
</v-select>
<template v-if="$v.form.project_status_id.$error">
<p class="text-danger" v-if="!$v.form.project_status_id.required">
Projekt - Status ist erforderlich!
</p>
</template>
</div>
</div>
推荐指数
解决办法
查看次数
Vue 3 select组件如何将2个属性绑定到2个v-model
假设我有一个数据 - news: {id:3, name:"book", author:'author'}。并选择与options: {id: 1, book: "book1"}, {id: 2, book: "book2"} .
现在我想用 news.id 和 news.book 进行 v-bind 选项 有没有办法做到这一点或准备好组件？
推荐指数
解决办法
查看次数
我可以使用 vue-select 在多个字段中进行搜索吗？
它默认在“标签”字段中搜索。但我想在他们两个（价值，标签）中进行搜索。有什么建议吗？
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app'
});<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/vue@2.1.10"></script>
<script src="http://unpkg.com/vue-select@2.0.0"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select :options="[{'value': 'ABC', 'label': 'Lorem ipsum dolor 1'}, {'value': 'CDE', 'label': 'Lorem ipsum dolor 2'}, {'value': 'VYZ', 'label': 'Lorem ipsum dolor 3'}, ]"></v-select>
</div>
</body>
</html>推荐指数
解决办法
查看次数
如何将npm包组件与Vite + Vue结合使用？
使用 Vue 将组件作为 npm 包添加到 Vite 的步骤是什么？
我假设这些：
npm install example- 打开
src/App.vue并添加import Example from 'example' - 在
App.vue, 在<template>, 添加<Example />
那是对的吗？
我尝试vue-select像这样安装和使用，但它不起作用：
推荐指数
解决办法
查看次数
VueSelect 如何使用对象的属性设置初始值
我正在使用 VueSelect 进行地址选择。国家、州、城市有 3 个选择组件。
通过使用 v-model，通过使用 reduce 属性来获取指定值而不是选项对象可以很好地工作。这里我的问题是不按键值设置默认值。
我期望它像 html select 一样通过 id 设置默认值。但它按原样显示键值，不受标签值的约束。
希望你能从我的解释中明白。
期待像 vuetify 的 v-select 一样。
vuetify 示例
<template>
<div class="col-sm-6 ">
<v-select
v-model="address.country_id"
:options="countryOptions"
:reduce="country => country.id"
label="name"
@input="resetStateAndCity"
:resetOnOptionsChange="true"
/>
</div>
<div class="col-sm-6">
<v-select
v-model="address.state_id"
:options="stateOptions"
:reduce="state => state.id"
label="name"
@input="resetCity"
:resetOnOptionsChange="true"
/>
</div>
<div class="col-sm-6">
<v-select
v-model="address.city_id"
:options="cityOptions"
:reduce="city => city.id"
label="name"
:resetOnOptionsChange="true"
/>
</div>
</template>
<script>
import VSelect from 'vue-select'
export default {
components: {
VSelect
},
data: function () { …推荐指数
解决办法
查看次数
向 vue-select 添加新标签
在 vue-select vuejs 组件中，如果您在其演示页面上看到，您可以从下拉列表中选择多个项目。但是，如果您键入下拉列表中不可用的内容，那么您只需键入新文本并按 Enter 键，它将成为一个标签。您可以在他们的演示页面上看到这种行为：
https://sagalbot.github.io/vue-select/
但是，我无法做到这一点。我可以从下拉菜单中进行选择，但如果我输入新内容，那么它就不会成为标签。我有这个 jsbin 显示我所做的事情。任何帮助表示赞赏。
http://jsbin.com/xoxohenoli/edit?html,js,输出
我的 JavaScript：
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
我的HTML：
<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/vue@2.1.10"></script>
<script src="http://unpkg.com/vue-select@2.0.0"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
获取vue-select值不起作用
我正在尝试从vue-select中获取选定的值，但是已经使用了所有方法并搜索了帮助，但是这可以正常工作，在页面加载时也会触发警报
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{id: 1, label: 'foo'},
{id: 3, label: 'bar'},
{id: 2, label: 'baz'},
],
selected: '',
},
methods: {
runme: function() {
alert(this.selected);
}
}
})body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}
h1 {
font-size: 26px;
font-weight: 600;
color: #2c3e5099;
text-rendering: optimizelegibility;
-moz-osx-font-smoothing: grayscale;
-moz-text-size-adjust: none;
}
#app {
max-width: 30em;
margin: 1em auto;
}<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script>
<div id="app">
<h1>Vue Select - Using …推荐指数
解决办法
查看次数
如何将 bootstrap-vue-select 控件的值设置为在表单加载时预先选择？
我正在使用 VueJS，或者更准确地说Bootsrap-Vue (select form type)。在模板中，我有以下代码：
<b-form-select>
<option v-for="(selectOption, indexOpt) in item.select.options"
:selected="selectOption == item.select.selected ? 'selected' : ''"
:key="indexOpt"
:value="selectOption"
>
{{ selectOption }} - {{ selectOption == item.select.selected }}
</option>
</b-form-select>
其中对应的数据定义为：
let item = {
label: "some text goes here",
inputType: 'text',
select: {
selected: '15',
options: [
'5',
'10',
'15',
'20'
]
}
}
从 UI 的输出中，我们可以看到条件被正确评估（检查项目“15”的条件返回“true”）。选择控件如下所示：
如果我检查 HTML，它看起来像：
但是，我在这里需要的是，为了能够在加载控件期间，将传递的参数传递到“ item.select.selected ”中，以实际显示要预选的选择控件中的哪个选项（在页面加载时）。在我尝试的许多选项中，我的选择控件在页面加载时没有被选中。
有没有办法实现这一目标？
推荐指数
解决办法
查看次数
标签 统计
vue-select ×10
vue.js ×8
vuejs2 ×4
javascript ×3
jestjs ×1
search ×1
select ×1
unit-testing ×1
vite ×1
vuejs3 ×1