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

Question

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

Answer 1

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

vue-axios|axios中文网 | axios vue-axios中文文档 http://www.axios-js.com/zh-cn/docs/vue-axios.html

axios完整api：

axios中文文档|axios中文网 | axios 欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答， 什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建 XMLHttpRequests 从 node http://www.axios-js.com/zh-cn/docs/

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

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

    }