I'm working with BootstrapVue.
I have two b-form-inputs the first one will be autofilled from a query string. Now I need to write the ID in my other b-form-input and want to check if the ID in my json file (based on my Name) is equal to my inputed ID.
Than my validDataAdded: function () should return that button will be enabled - this is my problem, i actually don't know how to solve that..
Thank You!
my template:
<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>
my script:
<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>
As I understand you, your property Name will be available in your template and if someone enters a number in ``, you want to check if your data array contains a matching pair of that number and Name. If yes, you can try the following:
<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>
For this approach you need two new properties, disabledButton and Number. Number will be the v-model of the entered input from the user, so we can use it in validDataAdded. This function moved to b-form-input type="number" because you need to trigger it. disabledButton should be false initially.
This would be an example for the function validDataAdded:
validDataAdded(name, number) {
Object.keys(this.data).forEach(key => {
if((this.data[key].Name === name) && (this.data[key].ID === number)) {
this.disabledButton = true;
}
});
}
With passed name and number it loops trough your data and checks if name and number matches the pair. If yes, disabledButton is set to true.