使用基于 json 文件的值检查输入值

Question

我正在与BootstrapVue 合作。

我有两个b-form-inputs，第一个将从查询字符串中自动填充。现在我需要在我的另一个 b-form-input 中写入 ID 并想检查我的 json 文件中的 ID（基于我的 Name）是否等于我输入的 ID。

比我的validDataAdded: function () 应该返回该按钮将被启用 - 这是我的问题，我实际上不知道如何解决..

谢谢！

我的模板：

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

我的脚本：

<script>
export default {
  name: "test",
  data() {
    return {
      data: [
        {
        "Name": "Harry",
        "ID": "1234",
        },
        {
        "Name": "Ron",
        "ID": "4321",
        },
        {
        "Name": "Snape",
        "ID": "1973",
        }
      ]
    };
  },

  methods: {

    validDataAdded: function () {
      return //NEED CODE HERE
    }, 
  },
};
</script>

Answer 1

据我了解，您的属性 Name 将在您的 template 中可用，如果有人在 `` 中输入数字，您想检查您的 data 数组是否包含该数字和 @ 的匹配对987654324@。如果是，您可以尝试以下方法：

<b-card class="mt-5 col-md-6">
   <div class="mt-2">Name</div>
   <b-form-input :disabled="true" v-model="this.Name" :value="this.Name"></b-form-input>
   <div class="mt-4">ID</div>
   <b-form-input type="number" v-model="this.Number" @keyup="validDataAdded(this.Name, this.Number)"></b-form-input>
   <b-button :disabled="!disabledButton">Login</b-button>
</b-card>

对于这种方法，您需要两个新属性，disabledButton 和 Number。 Number 将是用户输入的v-model，因此我们可以在validDataAdded 中使用它。此功能移至b-form-input type="number"，因为您需要触发它。 disabledButton 最初应该是 false。

这将是函数 validDataAdded 的示例：

validDataAdded(name, number) {
      Object.keys(this.data).forEach(key => {
        if((this.data[key].Name === name) && (this.data[key].ID === number)) {
          this.disabledButton = true;
        }
      });
    }

通过 name 和 number 它循环通过您的 data 并检查 name 和 number 是否匹配该对。如果是，则将disabledButton 设置为true。