input输入字符与后台数据源的查询匹配

<template>
  <div>
    <el-row :gutter="20" class="header">
      <el-input
        v-model="inputChr"
        clearable
        placeholder="请输入姓名"
      />
      <el-button type="primary" @click="initInput">查询</el-button>
    </el-row>
  </div>
</template>
<script setup>
// 问题：根据用户输入的字符与服务器数据源的某字段值匹配与否，判断程序是否需要执行

//以下是

//从本地存储中读取用户输入的单字数据
const inputChr = ref(JSON.parse(localStorage.getItem("chr")) || "");
//监测输入的变化
watch(
  inputChr,
  (newValue) => {
    localStorage.setItem("chr", JSON.stringify(newValue));
  },
  { deep: true, immediate: true }
);

//假定后台传过来的数组格式如下：
const arr = [
  { name: "Tom", grade: "A", value: 1 },
  { name: "Jack", grade: "E", value: 2 },
  { name: "Mike", grade: "C", value: 3 },
  { name: "John", grade: "D", value: 4 },
  { name: "Ben", grade: "E", value: 2 },
  { name: "Tony", grade: "D", value: 4 },
  { name: "Marry", grade: "D", value: 4 },
  { name: "Peter", grade: "E", value: 5 },
];

//需要判断：如果inputChr与arr.name的值相符，则继续下面的程序；如果inputChr与arr.name的值不相符，则弹框报错并退出程序
//....
const initInput = () => {
    /* ...... */
}
</script>
<style></style>

vue动态获取arr可以用axios，参考这里：

axios完整api：

代码大概如下。不过一般是将输入内容传服务器，服务器判断内容数据库记录数就行，不需要返回整个数组

    const initInput = () => {
        this.$http.get('后台网址').then((response) => {
            let arr = response.data;
            let item = arr.find(i => i.name == inputChr);
            if (!item) {
                alert('输入不匹配！');
                return
            }
            //后续的代码
        })

    }

const initInput = () => {
    for(let i in arr) {
        if (arr[i].name != inputChr) {
            alert('名字不匹配！');
            return
        }
        //后续的代码
    }

}

const initInput = () => {
  const result = arr.find((item) => item.name === inputChr);
  if (!result) return ElMessage.error('该用户不存在！')
  // 下方写用户存在的逻辑
  // ...
}