BootstrapVue中实现输入ID与JSON对应Name的ID匹配校验的问题

实现步骤 #

• 首先在data中新增两个响应式变量：Name（存储从查询字符串获取的姓名）、inputId（存储用户输入的ID），同时把原有数据源变量改名userList，避免和Vue实例自带的$data属性冲突
• 修正模板绑定语法：模板中不需要加this前缀，移除第一个输入框重复的:value绑定，给第二个输入框加v-model绑定inputId
• 把validDataAdded改成计算属性，比方法更适合做响应式状态判断，会自动监听依赖变化更新返回值
• 实现校验逻辑：先根据当前Name匹配数据源中对应的记录，再判断用户输入的ID是否和匹配到的记录ID一致

完整可运行代码 #

<template>
  <b-card class="mt-5 col-md-6">
    <div class="mt-2">Name</div>
    <b-form-input disabled v-model="Name"></b-form-input>
    <div class="mt-4">ID</div>
    <b-form-input type="number" v-model="inputId"></b-form-input>
    <b-button :disabled="!validDataAdded">Login</b-button>
  </b-card>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      Name: '', // 自行补充从查询字符串赋值的逻辑即可
      inputId: '',
      userList: [
        {
          "Name": "Harry",
          "ID": "1234",
        },
        {
          "Name": "Ron",
          "ID": "4321",
        },
        {
          "Name": "Snape",
          "ID": "1973",
        }
      ]
    };
  },
  computed: {
    validDataAdded() {
      // 匹配对应姓名的用户记录
      const matchUser = this.userList.find(item => item.Name === this.Name)
      // 匹配不到直接返回false，匹配到则比对ID，注意输入的数字转字符串和存储值对齐
      return matchUser ? String(this.inputId) === matchUser.ID : false
    }
  }
};
</script>

保留methods写法的兼容方案 #

如果你确实不想用计算属性，要保留原有validDataAdded方法的写法，只需做两处修改：

1. 方法实现：

validDataAdded: function () {
  const matchUser = this.userList.find(item => item.Name === this.Name)
  return matchUser ? String(this.inputId) === matchUser.ID : false
}

2. 模板中按钮的禁用属性改成调用方法：

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

该写法性能略低于计算属性，组件每次更新都会重新执行方法逻辑。

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