vue3 element plus 查询输入框实现输入就可以查询_vue3+element实现文本搜索-CSDN博客

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/134727704

本文介绍了如何在Vue应用中使用v-model和input事件监听输入框变化，当用户输入内容时触发handleQuery方法进行查询。示例代码展示了如何设置输入框和处理查询逻辑，包括可能调用后端接口获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

实现在输入框中输入内容就触发查询

思路：

可以使用@input事件或v-model来监听输入框的变化，当输入框内容变化时，会触发handleQuery方法，并在变化时触发查询操作，你可以在这个方法中执行实际的查询逻辑

源码如下：

<template>
  <div>
    <el-input v-model="searchText" @input="handleQuery"                    
       placeholder="请输入查询内容"></el-input>

    <!-- 这里添加展示查询结果的部分 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const searchText = ref('');

const handleQuery = () => {
  // 在这里执行查询操作，使用 searchText.value 作为查询关键字
  console.log('执行查询操作，关键字：', searchText.value);

  // 这里可以调用后端接口或者执行其他查询逻辑
  // 例如：getList(searchText.value);
};

// 你可以在这里添加获取数据的方法，例如：
// const getList = async (keyword) => {
//   // 发送请求获取数据
//   const response = await yourApiCall(keyword);

//   // 处理获取到的数据
//   // ...

//   // 更新组件中的数据
//   // resultData.value = response.data;
// };
</script>