将查询字符串与基于 json 文件的输入信息进行比较

Question

我正在使用 BootstrapVue - 我用 URL + 查询字符串 key 打开我的本地主机。现在我想根据我的输入 ID 检查我的查询字符串的 key 是否等于我在 json 数据中的键。

所以我需要这些步骤：

获取查询字符串的键（这个是 this.key 正如你在我的 mounted() 中看到的那样）
根据 json 文件获取我输入的 ID 的密钥
比较它们和return我的按钮可以被点击（如果它们匹配）

所以我的目标是：只有当我的 json 基于输入的 ID 的键等于我的查询字符串的键时，按钮才会启用。

我的 URL 打开本地主机：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>

Answer 1

您只需要检查当前 key 是否等于 queryString 键

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

另外，将查询字符串 key 添加到您的 data 对象

最后，您需要像这样将记录 key 传递给函数

<b-button :disabled="!validDataAdded(data.key)">
   Login
</b-button>

将查询字符串与基于 json 文件的输入信息进行比较

compare query string with inputed information based on a json file

javascript

vue.js

vuejs2

bootstrap-vue