javascript - 使用扩展的 VInput 规则和要求
问题描述
我正在使用 Vue+Vuetify,我需要重新设计一个自定义选择器组件。
当前代码如下所示:
<template>
<v-autocomplete
:id="id"
v-model="internalValue"
:clearable="clearable"
:disabled="disabled"
:hide-details="hideDetails"
:label="label"
:readonly="readonly"
:required="required"
:rules="rules"
:items="items"
item-value="id"
item-text="name"
no-data-text="No data"
/>
</template>
<script>
export default {
name: 'MyCustomSelector',
props: {
value: {
type: String,
default: null,
},
label: {
type: String,
default: '',
},
id: {
type: String,
default: null,
},
required: Boolean,
clearable: Boolean,
hideDetails: Boolean,
disabled: Boolean,
readonly: Boolean,
},
data() {
return {
items: [],
rules: [
(value) => {
if (this.required) {
return !!value || 'This field is empty'
} else {
return true
}
},
],
}
},
apollo: {
// apollo logic
...
this.items = loadedItems
...
},
computed: {
internalValue: {
get() {
return this.value
},
set(newVal) {
this.$emit('input', newVal)
},
},
},
}
</script>
如您所见,几乎所有的代码都只是props
通过。所以我决定将代码更改为:
<script>
import VAutocomplete from 'vuetify/lib/components/VAutocomplete'
export default VAutocomplete.extend({
name: 'MyCustomSelector',
props: {
itemText: {
type: String,
default: 'name',
},
itemValue: {
type: String,
default: 'id',
},
rules: {
type: Array,
default: () => [
(value) => {
if (this.required) {
return !!value || 'This field is empty'
} else {
return true
}
},
],
},
noDataText: {
type: String,
default: 'No data',
},
},
apollo: {
// apollo logic
...
this.cachedItems = loadedItems
...
},
})
</script>
一切都很好,但是有一个小问题 -因为未知prop
rules
,所以无法按照我想要的方式工作。this.required
这prop
取自Validatable
mixin,其中字段中的值被简单地依次替换为每个rules
.
问题是,如何编写rule
取决于required
字段状态的代码?
解决方案
您必须使用传统函数而不是箭头函数来获取道具的数据
rules: {
type: Array,
// change to the traditional function
default: function () {
return [
(value) => {
if (this.required) {
return !!value || "This field is empty";
} else {
return true;
}
},
];
},
},
推荐阅读
- objective-c - ARC 不允许将“int”隐式转换为“UILabel *”
- html - 使用 select2 设置选择标签和背景的样式
- android - 哪个是在 android 中进行仪器测试的最佳框架?
- java - Activity启动时在线程中加载Recyclerview
- java - 使用 Apache POI 3.17 第二次读取和删除行后 Excel xlsx 文件损坏
- python - 使用 pygresql(pg 模块)在语句中执行 SQL 选择
- hyperledger-fabric - Hyperledger Fabric:组织是否可以以只读容量加入频道?
- javascript - 使用 javascript 反转链表
- postman - 如何使用邮递员生成和提供批量用户/数据
- canvas - 如何将 webgl 2d 比例原点从中心移动到左上角?