check inputed value with value based on json file

Question

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>

how to solve this problem - that I check my manual written ID with the ID of my Name. — patrick96
– patrick96, Commented Oct 7, 2021 at 12:52

StevenSiebert · Accepted Answer · 2021-10-07 15:04:17Z

1

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.

answered Oct 7, 2021 at 15:04

StevenSiebert

1,4645 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

patrick96 Over a year ago

Perfect - it works well! Thanks!

Collectives™ on Stack Overflow

check inputed value with value based on json file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related