Currently implementing BootstrapVue, I have my localhost opened with a URL containing a query string parameter key. My objective now is to verify if the key from the query string matches the key in the JSON data, based on the input ID.
To achieve this, I need to follow these steps:
- Retrieve the key from the query string (referred to as
this.keyas shown in mymounted()method) - Fetch the key associated with the inputed ID from the JSON file
- Compare the two keys and enable the button only if they match
Therefore, my ultimate goal is to have the button activated only if the key from the JSON data corresponding to the inputed ID matches the key from the query string.
Here is the URL to access 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>