根据json文件的值检查输入的值

Question

我正在与BootstrapVue合作。

我有两个b-form-inputs，第一个将从查询字符串自动填充。现在我需要在我的其他b-form输入中写入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数组是否包含该数字和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