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