Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

123
Vistas
compare query string with inputed information based on a json file

I'm using BootstrapVue - I open my localhost with a URL + query string key. Now I want to check if the key of my query string is equal to my key in the json data, based on my input ID.

So I need these steps:

  1. Get key of query string (this one is this.key as you can see in my mounted() )
  2. Get key of my inputed ID, based on the json file
  3. Compare them and return that my button can be clicked (if they match)

So my goal is following: The button will only enabled if the key of my json based on the inputed ID is equal to my key of the query string.

My URL to open localhost: http://localhost:8080/?key=RxGxQZuLjGhFcdtQctJfcJejRPwEPety

<template>
  <b-card class="mt-5 col-md-6">
    <div v-if="hide" class="mt-3">
      <div class="mt-2">Name</div>
      <b-form-input v-model="data.Name" type="text"></b-form-input>
      <div class="mt-2">ID</div>
      <b-form-select :options="filterID" type="number" v-model="data.ID"></b-form-select>
      <b-button :disabled="!validDataAdded">
        Login
      </b-button>
    </div>
  </b-card>
</template>



<script>

export default {
  name: "login",
  data() {
    return {
      data: [
    {
        "Name": "Max",
        "ID": "1",
        "key": "RxGxQZuLjGhFcdtQctJfcJejRPwEPety"
    },
    {
        "Name": "Peter",
        "ID": "2",
        "key": "nFQetmxrRtWrYFVXcmFdgBuCmqLGDeNj"
    },
    {
        "Name": "Harry",
        "ID": "3",
        "key": "TSNcLYRepucVGxBFvgUfMGbNgATUPFvr"
    },
    
],
      hide: false,
    };
  },

  mounted() {
    const urlParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlParams.entries());
    this.key= params.key;

    if (this.key == null) {
      this.hide = false;
    } else {
      if(data.some(item => item['key'] === this.key)) {
          this.hide = true;
        } else {
          alert("ACCESS DENIED!")
        }
    }
  },

computed: {
    filterID: function () {
      var array = this.data.map((input) => input.ID);
      return array.sort((a, b) => {
        if (a < b) return -1;
        if (a > b) return 1;
        return 0;
      });
    },

    validDataAdded: function () {
      return //HERE I NEED TO CHECK 
    },
  },
};
</script>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

All you need is to check if the current key equal for the queryString key

methods: {
 validDataAdded: function (key) {
      return this.key == key;
 },
}

also, add the query string key to your data object

at last, you will need to pass the record key to the function like this

<b-button :disabled="!validDataAdded(data.key)">
   Login
</b-button>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda