时间戳

首页 > 解决方案 > 使用基于 json 文件的值检查输入值

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

问题描述

我正在与BootstrapVue.

我有两个b-form-inputs第一个将从查询字符串中自动填充。现在我需要ID在我的其他 b-form-input 中编写 ，并想检查ID我的 json 文件中的 （基于 my 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>

标签： javascriptvue.jsvuejs2bootstrap-vue

解决方案

据我了解，您的属性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检查是否匹配该对。如果是，则设置为。namenumberdisabledButtontrue

推荐阅读