英文:
vue-select "required" attribute not working as expected
问题
我正在使用Vue-select，并希望将下拉框设为必填，但看起来它不起作用。
尝试了"required"和"rules"，但都没有成功。
<v-select label="name"
:close-on-select="true"
v-model="CurrentAssignment"
v-on:input="onSelection"
:reduce="app => app.id"
placeholder="Select"
:options="EligibleOptions" :clearable="false"
>
</v-select>
感谢任何建议。
英文:
I am using Vue-select and want to make the drop-down mandatory, but looks like it is not working.
Tried the required, rules but had no luck.
<v-select label="name"
:close-on-select="true"
v-model="CurrentAssignment"
v-on:input="onSelection"
:reduce="app => app.id"
placeholder="Select"
:options="EligibleOptions" :clearable="false"
>
</v-select>
Appreciate any inputs.
答案1
得分: 2
我假定您正在使用Vue-select（通过查看reduce属性和v-select语法）。验证指南已经在文档中提供。您需要结合使用required属性和搜索作用域插槽。
以下是一个演示，在该演示中，当触发提交事件时，选择下拉框将显示错误并自动打开。
注意- 我使用表单的提交事件来触发验证。您可以使用自己的提交逻辑。
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
CurrentAssignment: null,
EligibleOptions: [
'foo',
'bar',
'baz'
]
},
methods: {
checkForm() {}
}
})
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
<form
id="app"
@submit="checkForm"
action="https://vuejs.org/"
method="post"
>
<v-select label="name"
:close-on-select="true"
v-model="CurrentAssignment"
placeholder="Select"
:options="EligibleOptions"
:clearable="false"
>
<template #search="{attributes, events}">
<input
class="vs__search"
:required="!CurrentAssignment"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
<button type="submit">Submit</button>
</form>
</div>
<!-- end snippet -->
<details>
<summary>英文:</summary>
I assume you are using [Vue-select][1] (by looking at the `reduce` prop and `v-select` syntax). A validation guide is already available in the [documentation][2]. You need to use the `required` prop in combination with the search-scoped slot.
Here is a demo in which when submit event will be triggered the selection dropdown will show an error and open automatically.
**Note-** I used the form's submit event to trigger the validation. You can use your submission logic.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
CurrentAssignment: null,
EligibleOptions: [
'foo',
'bar',
'baz'
]
},
methods: {
checkForm() {}
}
})
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
<form
id="app"
@submit="checkForm"
action="https://vuejs.org/"
method="post"
>
<v-select label="name"
:close-on-select="true"
v-model="CurrentAssignment"
placeholder="Select"
:options="EligibleOptions"
:clearable="false"
>
<template #search="{attributes, events}">
<input
class="vs__search"
:required="!CurrentAssignment"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
<button type="submit">Submit</button>
</form>
</div>
<!-- end snippet -->
[1]: https://vue-select.org/
[2]: https://vue-select.org/guide/validation.html#required
</details>
# 答案2
**得分**: 0
替代使用 **required**，使用 **`:rules`** **属性** 并将其设置为如下的 **`required`** 方法：
模板
--------
```html
|-----------------|
<v-select :rules="required"></v-select>
脚本
methods: {
required: (v) => !!v || "字段必填"
}
英文:
Instead of required use :rules prop and give it required method like this:
Template
|-----------------|
<v-select :rules="[required]"></v-select>
Script
methods: {
required: (v) => !!v || "field required"
}
答案3
得分: 0
使用此rules属性，您可以将以下内容从您的数据传递到v-select组件：
rules: {
select: [(v) => v.length > 0 || "此字段为必填项"],
}
并将此数据添加到v-select组件中，如下所示：
<v-select label="name"
:close-on-select="true"
v-model="CurrentAssignment"
v-on:input="onSelection"
:rules="rules.select"
:reduce="app => app.id"
placeholder="选择"
:options="EligibleOptions"
:clearable="false"
>
</v-select>
英文:
By using this rules prop you can pass this from your data to that v-select
rules: {
select: [(v) => v.length>0 || "This field is required"],
}
and add this data to the v-select component as follow:
<v-select label="name"
:close-on-select="true"
v-model="CurrentAssignment"
v-on:input="onSelection"
:rules="rules.select"
:reduce="app => app.id"
placeholder="Select"
:options="EligibleOptions" :clearable="false"
>
</v-select>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论