check inputed value with value based on json file-CodePudding

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>

CodePudding user response：

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.