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

Posted 2023-02-16

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

【英文标题】：compare query string with inputed information based on a json file

【发布时间】：2021-11-27 09:26:01

【问题描述】：

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

所以我需要这些步骤：

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

所以我的目标是：只有当我基于输入 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>

【问题讨论】：

您面临的问题是什么？除此之外，这个URL 只能在你的机器上工作

问题是我不知道如何解决.. 或者如何获取我选择的 ID 的密钥

我认为问题在于您没有在数据object 中定义key，然后才使用它，这就是为什么它返回null

这段代码中的一切都运行良好。我需要一个解决方案来解决这个问题validDataAdded: function() - 因为我不知道如何获取我选择的 ID 的密钥。

【参考方案1】：

您只需检查当前的key 是否与queryString 键相等

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

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

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

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

【讨论】：

谢谢 - 我在这个 Error in render: "TypeError: _vm.validDataAdded is not a function" 上收到以下错误

抱歉，忘记在methods对象中添加这个函数，而不是计算出来的object

完美，非常简单，谢谢！ - 在我看来，这更困难