Estoy usando BootstrapVue : abro mi localhost con una URL + key de cadena de consulta. Ahora quiero verificar si la key de mi cadena de consulta es igual a mi clave en los datos json, según mi ID de entrada.

Entonces necesito estos pasos:

1. Obtener la clave de la cadena de consulta (esta es this.key como se puede ver en mi mount mounted() )
2. Obtenga la clave de mi identificación ingresada, según el archivo json
3. Compárelos y devuelva que se puede hacer clic en mi botón ( si coinciden )

Entonces, mi objetivo es el siguiente: el botón solo se habilitará si la clave de mi json según la ID ingresada es igual a mi clave de la cadena de consulta.

Mi URL para abrir 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>