0

I'm using BootstrapVue - I open my localhost with a URL + query string key. Now I want to check if the key of my query string is equal to my key in the json data, based on my input ID.

So I need these steps:

  1. Get key of query string (this one is this.key as you can see in my mounted() )
  2. Get key of my inputed ID, based on the json file
  3. Compare them and return that my button can be clicked (if they match)

So my goal is following: The button will only enabled if the key of my json based on the inputed ID is equal to my key of the query string.

My URL to open 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>
4
  • What is the problem you face? besides that this URL working only in your machine Commented Oct 7, 2021 at 10:19
  • the problem is that I don't know how to solve that.. or how to get the key of my selected ID Commented Oct 7, 2021 at 10:25
  • I think the problem is that you don't define the key in the data object first before use it this is why it returns with null Commented Oct 7, 2021 at 10:32
  • everything in this code works well.. I need a solution for this validDataAdded: function() - because I dont know how to get the key of my selected ID.. Commented Oct 7, 2021 at 10:35

1 Answer 1

1

All you need is to check if the current key equal for the queryString key

methods: {
 validDataAdded: function (key) {
      return this.key == key;
 },
}

also, add the query string key to your data object

at last, you will need to pass the record key to the function like this

<b-button :disabled="!validDataAdded(data.key)">
   Login
</b-button>
Sign up to request clarification or add additional context in comments.

3 Comments

thanks - I get following Error on this Error in render: "TypeError: _vm.validDataAdded is not a function"
sorry, for forgotten that add this function in the methods object, not the computed object
perfect, it was so easy thank You! - in my head it was more difficult

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.