时间戳

首页 > 解决方案 > 将查询字符串与基于 json 文件的输入信息进行比较

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

问题描述

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

所以我需要这些步骤：

  1. 获取查询字符串的键（这个this.key你可以在我的 中看到mounted()）
  2. 根据 json 文件获取我输入的 ID 的密钥
  3. 比较它们并返回可以单击我的按钮（如果它们匹配）

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

我打开 localhost 的 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>

标签： javascriptvue.jsvuejs2bootstrap-vue

解决方案

您只需要检查密钥的电流是否key相等queryString

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

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

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

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

推荐阅读