【问题标题】：Passing Extra Parameters in Vuetify Rules Definition在 Vuetify 规则定义中传递额外参数
【发布时间】：2020-03-12 00:20:20
【问题描述】：

我的目标是定义我的规则一次，然后将它们重复用于我的所有字段。为此，我需要向我的规则传递额外的参数，例如一个 v-text-field 上的 maxlength 为 20，而另一个 v-text-field 上的 maxlength 为 50。据我所知，只有值被传递。如何向我的规则添加额外的参数？

<template>
  <v-input :rules=[rules.max(20)] v-model="field1" />
  <v-input :rules=[rules.max(50)] v-model="field2" />
</template>
<script>    
  data() {
    rules: {
      max(v, maxnum) { //maxnum is the parameter I want to add so that I can pass different values and reuse the same rule on multiple fields
        return (v || '').length <= maxnum || 'Max exceeded';
      }
    }
  }
</script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您需要一个返回规则函数的函数。包装函数应该接受 rules 函数不知道的任何额外参数（除了值之外的任何内容）：

<template>
  <v-input :rules=[rules.max(20)] v-model="field1" />
  <v-input :rules=[rules.max(50)] v-model="field2" />
</template>

<script>    
  data() {
    rules: {
      max(maxNum) {
        return v => (v || '').length <= maxNum || 'Max exceeded';
      }
    }
  }
</script>

【讨论】：

【解决方案2】：

只需将 v-model 变量作为第二个参数传递给您的规则。

<template>
  <v-input :rules=[rules.max(20, field1)] v-model="field1" />
  <v-input :rules=[rules.max(50, field1)] v-model="field2" />
</template>

<script>    
  data() {
    rules: {
      max(maxnum, v) { 
        return (v || '').length <= maxnum || 'Max exceeded';
      }
    }
  }
</script>

【讨论】：

默认情况下，该值已传递给规则函数，因此无需传入。

【解决方案3】：

类星体示例

rules 属性需要一个数组。这是正确的方法之一：

<template>
  <!-- ... -->
  <q-input
     v-model="username"
     label="Username"
     :rules="maxRule(30)"
     />
  <!-- ... -->
</template>

<script>
import { ref } from 'vue'
export default {
  setup (props) {
    const username = ref(null)
    const maxRule = (limit) => [val => val.length <= limit || `Please use maximum ${limit} characters`]
    return {
      username,
      maxRule 
    }
  }
}
</script>

【讨论】：