规则应该返回一个字符串或布尔值，而不是接收到的“对象”

Question

当我使用data: () => ({ 时，我正在使用 vuetify 进行验证。它没有产生任何错误。 然后改成data () {return { 会报错：Rules should return a string or boolean, received 'object' instead

这是我的代码。重新加载整个页面时产生错误，不再有效

:rules="regla_buscar":

<template>
  <v-app>
    <v-form
      ref="form"
      v-model="form_valid"
      lazy-validation
      >
    <v-toolbar max-height="64">
      
      <v-btn icon color="indigo" to="/es/" nuxt>
        <v-icon>fas fa-filter</v-icon>
      </v-btn>
      <v-toolbar-title class="hidden-md-and-down">Red Social</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-combobox
        v-model="model_categoria"
        :items="items_categoria"
        :search-input.sync="search"
        item-value="Clave"
        item-text="Nombres"
        hide-selected
        hide-details
        label="Categoria"
        persistent-hint
        small-chips
        class="mx-4 hidden-sm-and-down"
        @change="evento_categoria"
        >
      </v-combobox>
      <v-combobox
        v-model="model_pais"
        :items="items_pais"
        :search-input.sync="search"
        item-value="Clave"
        item-text="Nombres"
        hide-selected
        hide-details
        label="Pais"
        persistent-hint
        small-chips
        class="mx-4 hidden-md-and-down"
        @change="evento_pais"
        >
      </v-combobox>
      <v-text-field
        flat
        hide-details
        label="Buscar"
        prepend-inner-icon="mdi-magnify"
        single-line
        class="mx-4"
        clearable
        v-model="model_busqueda"
        v-on:keyup.enter="evento_busqueda"
        :rules="regla_buscar"
        >
      </v-text-field>
      <v-btn color="#1ebea5" dark
        to="/es/publish" nuxt
        >
        <v-icon>fas fa-upload</v-icon><div class="mx-4 hidden-sm-and-down">Publicar</div>
      </v-btn>
             
    </v-toolbar>
    </v-form>
      <v-main>
        <nuxt keep-alive />
      </v-main> 
    </v-app>
</template>

<script>
  import categorias from '../archivos/Categorias';
  import paises from '../archivos/Paises';
  import sexos from '../archivos/Sexos';
  import relevancia from '../archivos/Relevancia';

  const clase="flag-icon flag-icon-";
  export default {

    data() {                                   // <== changed this line
      return {
        form_valid: true,
        drawer: null,
        model: ['Vuetify'],
        search: null,
        icons: [
          'fab fa-whatsapp',
          'fab fa-facebook-f',
          'fab fa-telegram-plane',
          'fab fa-slack',
          'fab fa-discord'
        ],
        model_categoria: '',
        model_pais: '',
        model_relevancia: '',
        model_busqueda:'',
        items_categoria: [],
        items_pais: [],
        items_relevancia: [],
        select: { state: 'Español', abbr: 'es' },
          items: [
            { state: 'Español', abbr: 'es' },
            { state: 'Ingles', abbr: 'en' },
            { state: 'Portuges', abbr: 'pr' },
            { state: 'Aleman', abbr: 'al' },
            { state: 'Frances', abbr: 'fr' },
          ],
        disabled: false,
        absolute: false,
        openOnHover: false,
        value: false,
        closeOnClick: true,
        closeOnContentClick: true,
        offsetX: false,
        offsetY: true,
        busqueda:'',
        regla_buscar: [
          v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa minino 3 carateres',
        ]
      }
    },
    async fetch() {
      this.items_categoria = categorias;
      this.items_pais = paises;
      this.items_relevancia = relevancia;
    },
    methods: {
      evento_busqueda () {
        if(this.$refs.form.validate()){
        this.busqueda = this.model_busqueda;
        let parametros = this.evento_parametros();
        this.$router.push({path: '/es/', query : {
          xca:parametros.xca,
          xpa:parametros.xpa,
          xre:parametros.xre,
          xbu:parametros.xbu,
          }})
        }
      },
      evento_categoria () {
        let parametros = this.evento_parametros();
        this.$router.push({path: '/es/', query : {
          xca:parametros.xca,
          xpa:parametros.xpa,
          xre:parametros.xre,
          xbu:parametros.xbu,
          }})
      },
      evento_pais () {
        let parametros = this.evento_parametros();
        this.$router.push({path: '/es/', query : {
          xca:parametros.xca,
          xpa:parametros.xpa,
          xre:parametros.xre,
          xbu:parametros.xbu,
          }})
      },
      evento_relevancia () {
        let parametros = this.evento_parametros();
        this.$router.push({path: '/es/', query : {
          xca:parametros.xca,
          xpa:parametros.xpa,
          xre:parametros.xre,
          xbu:parametros.xbu,
          }})
      },
      evento_parametros(){
        let categoria = undefined;
        if (this.model_categoria != null){
          categoria = this.model_categoria.Clave;
        }
        let pais = undefined;
        if(this.model_pais != null){
          pais = this.model_pais.Clave;
        }
        let relevancia = undefined;
        if(this.model_relevancia != null){
          relevancia = this.model_relevancia.Clave;
        }
        if(this.busqueda == ''){
          this.busqueda=undefined
        }
        let parametros = {
          xca: categoria,
          xpa: pais,
          xre: relevancia,
          xbu: this.busqueda
        }
        return parametros;
      }
    }
  }
</script>

Answer 1

也许你的问题是这样的！

在 v-text-field 规则中，您应该传递一个数组，但您将“regla_buscar”设置为一个对象

我认为这是因为你的 regla_buscar 的最后一个额外的“，”

  regla_buscar: [
              v => (!v || (v && v.length > 2 && v.length <= 30))  || 
'Ingresa minino 3 carateres', <===== this commaaaaaaa
            ]

某些浏览器将 ["your Resul", ] 转换为 ["your Result", null] 并且 null 是一个对象

您可以将模式更改为“水疗”并尝试一下

Answer 2

我也遇到过这个问题。

我发现如果nuxt fetch()钩子存在并且页面渲染服务端，v-text-field规则逻辑每次都会抛出这个错误（即使fetch方法为空）。

我能够将 fetch() 更改为 created() 或 mount() 并且错误消失了。

Answer 3

由于您使用的是 fetch()。从数据属性中删除regla_buscar: [v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa minino 3 carateres']

并像这样添加为计算属性

regla_buscar: function() {
  return [v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa minino 3 carateres']
}