Question

我正在构建一个vuejs组件，它接受一个名为 idFieldType 的道具

现在我希望此道具只接受数字类型或字符串类型

所以我写了如下

idFieldType: {
    Type: Function,
    default: function() {
        return Number;
    },
    validator: function() {
         if(value == String || value == Number) {
               return true;
         }

         return false;    
    }
}

我也尝试将类型替换为Object。

我的问题是如何编写仅接受特定类型的道具？

Answer 1

Vue.JS内置道具验证，你可以设置类型，是否需要，默认值... 例如：

# for reproducibility
set.seed(20170805)

# your data
proc<-sample(c("EMR","RFA","Biopsies"), 100, replace = TRUE)
#Sample dates
dat<-sample(seq(as.Date('2013/01/01'), as.Date('2017/05/01'), by="day"), 100)
#Generate 20 hospital numbers in no particular order:
Id<-sample(c("P43","P63","K52","G24","S55","D07","U87","P22","Y76","I92","P22","P02","U22415","U23","S14","O34","T62","J32","F63","T43"), 100, replace = TRUE)

# my approach using dplyr
library(dplyr)
#> 
#> Attaching package: 'dplyr'
#> The following objects are masked from 'package:stats':
#> 
#>     filter, lag
#> The following objects are masked from 'package:base':
#> 
#>     intersect, setdiff, setequal, union
df <- data_frame(proc, dat, Id)

df %>% 
 # make sure that we progress in the direct order of time...
 arrange(dat) %>% 
 # for each patient:
 group_by(Id) %>%
 # find the last position
 mutate(origin = lag(proc, 1), destination = proc) %>%
 # for each origin, destination-pair...
 group_by(origin, destination) %>% 
 # summarise the number of pairs
 summarise(n = n()) %>% 
 # not really necessary, but gives a littlebit nicer output here...
 ungroup()
#> # A tibble: 12 x 3
#>      origin destination     n
#>       <chr>       <chr> <int>
#>  1 Biopsies    Biopsies     5
#>  2 Biopsies         EMR     8
#>  3 Biopsies         RFA    11
#>  4      EMR    Biopsies    11
#>  5      EMR         EMR    11
#>  6      EMR         RFA    10
#>  7      RFA    Biopsies     6
#>  8      RFA         EMR    12
#>  9      RFA         RFA     8
#> 10     <NA>    Biopsies     8
#> 11     <NA>         EMR     4
#> 12     <NA>         RFA     6

请注意，Vue.js还接受多种可能类型Vue.component('example', { props: { // basic type check (`null` means accept any type) propA: Number, // multiple possible types propB: [String, Number], // a required string propC: { type: String, required: true }, // a number with default value propD: { type: Number, default: 100 }, // object/array defaults should be returned from a // factory function propE: { type: Object, default: function () { return { message: 'hello' } } }, // custom validator function propF: { validator: function (value) { return value > 10 } } } })，这就是您所需要的。您可以在official wiki

中详细了解相关内容

Answer 2

Ok, found the solution..

idFieldType: {
                type: Function,
                default: Number,
                validator: function (value) {
                    if (value() == String || value() == Number) {
                        return true;
                    }

                    return false;
                }
            }

The problem was that when specifying type as Function the default expects a function, I was returning a function returning a function :)

Vue js - 将道具定义为特定类型

2 个答案: