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

Question

我正在与 BootstrapVue 合作。

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

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

谢谢！

我的模板：

<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 数组包含该数字和 Name 的匹配对。如果是，您可以尝试以下操作：

<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。

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

check inputed value with value based on json file

javascript

vue.js

vuejs2

bootstrap-vue