Estoy trabajando con BootstrapVue .
Tengo dos b-form-inputs la primera se completará automáticamente a partir de una cadena de consulta. Ahora necesito escribir la ID en mi otra entrada de formulario b y quiero verificar si la ID en mi archivo json (basado en mi Name ) es igual a mi ID ingresada.
Que mi validDataAdded: function () debería devolver que el botón estará habilitado; este es mi problema, en realidad no sé cómo resolverlo ...
¡Gracias!
mi plantilla:
<template> <b-card class="mt-5 col-md-6"> <div class="mt-2">Name</div> <b-form-input :disabled="true" v-model="this.Name" :value="this.Name"></b-form-input> <div class="mt-4">ID</div> <b-form-input type="number"></b-form-input> <b-button :disabled="!validDataAdded">Login</b-button> </b-card> </template>mi guion:
<script> export default { name: "test", data() { return { data: [ { "Name": "Harry", "ID": "1234", }, { "Name": "Ron", "ID": "4321", }, { "Name": "Snape", "ID": "1973", } ] }; }, methods: { validDataAdded: function () { return //NEED CODE HERE }, }, }; </script>Según tengo entendido, su propiedad Name estará disponible en su template y si alguien ingresa un número en ``, desea verificar si su matriz data contiene un par coincidente de ese número y Name . Si es así, puedes intentar lo siguiente:
<b-card class="mt-5 col-md-6"> <div class="mt-2">Name</div> <b-form-input :disabled="true" v-model="this.Name" :value="this.Name"></b-form-input> <div class="mt-4">ID</div> <b-form-input type="number" v-model="this.Number" @keyup="validDataAdded(this.Name, this.Number)"></b-form-input> <b-button :disabled="!disabledButton">Login</b-button> </b-card> Para este enfoque, necesita dos propiedades nuevas, disabledButton y Number . Number será el v-model de la entrada ingresada por el usuario, por lo que podemos usarlo en validDataAdded . Esta función se movió a b-form-input type="number" porque necesita activarla. disabledButton debe ser false inicialmente.
Este sería un ejemplo para la función validDataAdded :
validDataAdded(name, number) { Object.keys(this.data).forEach(key => { if((this.data[key].Name === name) && (this.data[key].ID === number)) { this.disabledButton = true; } }); } Con el name y number pasados, recorre sus data y verifica si el name y el number coinciden con el par. En caso afirmativo, disabledButton se establece en true .