规则应返回字符串或布尔值，而是接收“对象”

Question

当我使用时，我正在使用 vuetify 进行验证data: () => ({。它没有生成任何错误。\n然后更改为，data () {return {我将得到以下错误：规则应该返回字符串或布尔值，而是收到“对象”

\n

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

\n

:rules="regla_buscar":

\n

<template>\n  <v-app>\n    <v-form\n      ref="form"\n      v-model="form_valid"\n      lazy-validation\n      >\n    <v-toolbar max-height="64">\n      \n      <v-btn icon color="indigo" to="/es/" nuxt>\n        <v-icon>fas fa-filter</v-icon>\n      </v-btn>\n      <v-toolbar-title class="hidden-md-and-down">Red Social</v-toolbar-title>\n      <v-spacer></v-spacer>\n      <v-combobox\n        v-model="model_categoria"\n        :items="items_categoria"\n        :search-input.sync="search"\n        item-value="Clave"\n        item-text="Nombres"\n        hide-selected\n        hide-details\n        label="Categoria"\n        persistent-hint\n        small-chips\n        class="mx-4 hidden-sm-and-down"\n        @change="evento_categoria"\n        >\n      </v-combobox>\n      <v-combobox\n        v-model="model_pais"\n        :items="items_pais"\n        :search-input.sync="search"\n        item-value="Clave"\n        item-text="Nombres"\n        hide-selected\n        hide-details\n        label="Pais"\n        persistent-hint\n        small-chips\n        class="mx-4 hidden-md-and-down"\n        @change="evento_pais"\n        >\n      </v-combobox>\n      <v-text-field\n        flat\n        hide-details\n        label="Buscar"\n        prepend-inner-icon="mdi-magnify"\n        single-line\n        class="mx-4"\n        clearable\n        v-model="model_busqueda"\n        v-on:keyup.enter="evento_busqueda"\n        :rules="regla_buscar"\n        >\n      </v-text-field>\n      <v-btn color="#1ebea5" dark\n        to="/es/publish" nuxt\n        >\n        <v-icon>fas fa-upload</v-icon><div class="mx-4 hidden-sm-and-down">Publicar</div>\n      </v-btn>\n             \n    </v-toolbar>\n    </v-form>\n      <v-main>\n        <nuxt keep-alive />\n      </v-main> \n    </v-app>\n</template>\n\n<script>\n  import categorias from '../archivos/Categorias';\n  import paises from '../archivos/Paises';\n  import sexos from '../archivos/Sexos';\n  import relevancia from '../archivos/Relevancia';\n\n  const clase="flag-icon flag-icon-";\n  export default {\n\n    data() {                                   // <== changed this line\n      return {\n        form_valid: true,\n        drawer: null,\n        model: ['Vuetify'],\n        search: null,\n        icons: [\n          'fab fa-whatsapp',\n          'fab fa-facebook-f',\n          'fab fa-telegram-plane',\n          'fab fa-slack',\n          'fab fa-discord'\n        ],\n        model_categoria: '',\n        model_pais: '',\n        model_relevancia: '',\n        model_busqueda:'',\n        items_categoria: [],\n        items_pais: [],\n        items_relevancia: [],\n        select: { state: 'Espa\xc3\xb1ol', abbr: 'es' },\n          items: [\n            { state: 'Espa\xc3\xb1ol', abbr: 'es' },\n            { state: 'Ingles', abbr: 'en' },\n            { state: 'Portuges', abbr: 'pr' },\n            { state: 'Aleman', abbr: 'al' },\n            { state: 'Frances', abbr: 'fr' },\n          ],\n        disabled: false,\n        absolute: false,\n        openOnHover: false,\n        value: false,\n        closeOnClick: true,\n        closeOnContentClick: true,\n        offsetX: false,\n        offsetY: true,\n        busqueda:'',\n        regla_buscar: [\n          v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa minino 3 carateres',\n        ]\n      }\n    },\n    async fetch() {\n      this.items_categoria = categorias;\n      this.items_pais = paises;\n      this.items_relevancia = relevancia;\n    },\n    methods: {\n      evento_busqueda () {\n        if(this.$refs.form.validate()){\n        this.busqueda = this.model_busqueda;\n        let parametros = this.evento_parametros();\n        this.$router.push({path: '/es/', query : {\n          xca:parametros.xca,\n          xpa:parametros.xpa,\n          xre:parametros.xre,\n          xbu:parametros.xbu,\n          }})\n        }\n      },\n      evento_categoria () {\n        let parametros = this.evento_parametros();\n        this.$router.push({path: '/es/', query : {\n          xca:parametros.xca,\n          xpa:parametros.xpa,\n          xre:parametros.xre,\n          xbu:parametros.xbu,\n          }})\n      },\n      evento_pais () {\n        let parametros = this.evento_parametros();\n        this.$router.push({path: '/es/', query : {\n          xca:parametros.xca,\n          xpa:parametros.xpa,\n          xre:parametros.xre,\n          xbu:parametros.xbu,\n          }})\n      },\n      evento_relevancia () {\n        let parametros = this.evento_parametros();\n        this.$router.push({path: '/es/', query : {\n          xca:parametros.xca,\n          xpa:parametros.xpa,\n          xre:parametros.xre,\n          xbu:parametros.xbu,\n          }})\n      },\n      evento_parametros(){\n        let categoria = undefined;\n        if (this.model_categoria != null){\n          categoria = this.model_categoria.Clave;\n        }\n        let pais = undefined;\n        if(this.model_pais != null){\n          pais = this.model_pais.Clave;\n        }\n        let relevancia = undefined;\n        if(this.model_relevancia != null){\n          relevancia = this.model_relevancia.Clave;\n        }\n        if(this.busqueda == ''){\n          this.busqueda=undefined\n        }\n        let parametros = {\n          xca: categoria,\n          xpa: pais,\n          xre: relevancia,\n          xbu: this.busqueda\n        }\n        return parametros;\n      }\n    }\n  }\n</script>\n

\n

Answer 1

我也遇到了这个问题。

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

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