Telegram API Question posted in
A comprehensive official documentation can be found here.

Rules should return a string or boolean, received 'object' instead – Telegram API

I am doing validation with vuetify when I used data: () => ({. It did not generate any error.
Then change to data () {return { and I will get the error of: Rules should return a string or boolean, received ‘object’ instead

This is my code. The error is generated when reloading the entire page and no longer valid

: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>
Tags:

3

Answers


  1. 0

    Maybe your problem is this!!

    In v-text-field rules you should pass an array but you set "regla_buscar" as an object

    I think Its because of an extra "," in the last of your regla_buscar

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

    Some browser convert ["your Resul", ] to ["your Result", null] and null is an object

    And you can change your mode to "spa" and try it

    Login or Signup to reply.
  2. 0

    I ran into this issue as well.

    I found that if the nuxt fetch() hook exists and the page is rendered server side, the v-text-field rules logic throws this error every time (even if the fetch method is empty).

    I was able to change fetch() to created() or mounted() and the error went away.

    Login or Signup to reply.
  3. 0

    Since you are using fetch(). Remove the regla_buscar: [v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa minino 3 carateres'] from data property

    And add as a computed property like so

    regla_buscar: function() {
  return [v => (!v || (v && v.length > 2 && v.length <= 30)) || 'Ingresa minino 3 carateres']
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search