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>

CodePudding user response：

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>