BootstrapVue项目中比对查询字符串与JSON数据对应密钥控制按钮状态

先修正现有代码的两处明显问题，再给出计算属性的实现逻辑：

1 需先调整的前置错误 #

• mounted钩子中if(data.some(...))的data前漏加this，会直接报变量未定义错误
• 你当前data()返回的配置里，存储用户列表的字段名和表单绑定的对象名都是data，会产生逻辑冲突，建议把用户列表字段改名userList，单独新增form字段存储表单输入，同时提前声明key字段避免响应式异常：

data() {
  return {
    // 原用户列表改名为userList避免冲突
    userList: [
      {
        "Name": "Max",
        "ID": "1",
        "key": "RxGxQZuLjGhFcdtQctJfcJejRPwEPety"
      },
      {
        "Name": "Peter",
        "ID": "2",
        "key": "nFQetmxrRtWrYFVXcmFdgBuCmqLGDeNj"
      },
      {
        "Name": "Harry",
        "ID": "3",
        "key": "TSNcLYRepucVGxBFvgUfMGbNgATUPFvr"
      },
    ],
    // 新增表单字段存储用户输入
    form: {
      Name: '',
      ID: ''
    },
    hide: false,
    key: '' // 提前声明key字段
  };
},

对应模板里的表单绑定也要同步修改：

<b-form-input v-model="form.Name" type="text"></b-form-input>
<b-form-select :options="filterID" type="number" v-model="form.ID"></b-form-select>

mounted和filterID计算属性里的相关引用也要对应调整：

// mounted调整后代码
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 {
    // 补全this，引用改后的userList
    if(this.userList.some(item => item['key'] === this.key)) {
        this.hide = true;
      } else {
        alert("ACCESS DENIED!")
      }
  }
},

// filterID调整后代码
filterID: function () {
  var array = this.userList.map((input) => input.ID);
  return array.sort((a, b) => {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  });
},

2 validDataAdded计算属性实现 #

逻辑为：先校验ID和URL的key都存在，再取出选中ID对应的用户key做全等比对：

validDataAdded: function () {
  // 未选ID或者无URL携带的key直接返回false，禁用按钮
  if (!this.form.ID || !this.key) return false
  // 查找选中ID对应的用户条目
  const targetUser = this.userList.find(item => item.ID === this.form.ID)
  // 匹配到用户则比对key，否则返回false
  return targetUser ? targetUser.key === this.key : false
}

调整后即可实现：仅当用户选择的ID对应的key和URL携带的key完全一致时，登录按钮才会启用。

内容的提问来源于stack exchange，提问作者user16365685