我写程序查询功能有些问题

问题遇到的现象和发生背景

查询功能我想输入查询后,立即在最左边显示查询结果,但是我写的程序是过一会才会在最右边显示结果,我不明白哪里写的有问题,谁能帮我改改,我还要实现左右点击按钮在查询期无效

代码

<template>
  <!-- 此页面为图片轮播页面 -->
  <div id="kuang_jia">
    <input id="chaxun" v-model="imgList.text" placeholder="请输入电影名称进行查询" type="text">
    <div id="img">
      <div ref="divImage" @mouseenter="mouseEenter" @mouseleave="mouseLeave">
        <!--   标签中的ref的作用和js中的document.getElementById作用一样.都是获取标签属性,此div用于控制超出隐藏     -->
        <img v-for="(item, index) in arrayList" :key="index" alt="" v-bind:src="item"/>
        <!--   设置图片数组循环,依次获取所有图片   -->
        <table v-for="(item, index) in miaoshuList" id="miaoshu" :key="index"
               ref="miaoshu" v-bind:class="['table', index]">
          <tr>
            <td>名称:{{ item.mingcheng }}</td>
          </tr>
          <tr>
            <td>时长:{{ item.shichang }}</td>
          </tr>
          <tr>
            <td>类型:{{ item.leixing }}</td>
          </tr>
          <tr>
            <td>导演:{{ item.daoyan }}</td>
          </tr>
        </table>
      </div>
    </div>
    <span class="zuo" @click="zuo"> &lt; </span>
    <span class="you" @click="you"> &gt; </span>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import one from '../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg'
import tow from '../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg'
import three from '../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg'
import four from '../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg'
import five from '../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg'
import six from '../../image/9477156de6d94c49c505a9dfce8e8c17.jpg'
import seven from '../../image/c52be335098658931847fa0ecbcf7d03.jpeg'
import eight from '../../image/d86d80e8573ab91914a6e9ad5217c785.jpg'
import nine from '../../image/e305fca1a381bda8482d8b3296da61f6.jpg'
import ten from '../../image/fa983053c19cf3c7b27491507799e02e.jpeg'
// 导入所有图片

const imgList = reactive({ array: [], text: '' })
imgList.array = [one, tow, three, four, five, six, seven, eight, nine, ten]
// 将图片放入数组,以供循环,由于图片是直接导入的,所以不用放在onMounted()方法内
const divImage = ref()
// 获取标签属性
const countChu = ref()
// 设置滚动初始值
const width = ref()
let xunHuan1
// 设置轮播变量,方便调用
const miaoshuList = ref()
// 设置描述数组
const arrayList = computed(() => {
  if (imgList.text === '') {
    countChu.value = 1
    return imgList.array
  }
  const arrayChaxun1 = miaoshuList.value.filter(x => x.mingcheng.includes(imgList.text))
  const arrayChaxun2 = []
  for (let i = 0; i < arrayChaxun1.length; i++) {
    miaoshuList.value.forEach((x) => {
      if (x.mingcheng === arrayChaxun1[i].mingcheng) {
        arrayChaxun2.push(imgList.array[miaoshuList.value.indexOf(x)])
      }
    })
  }
  countChu.value = 6
  return arrayChaxun2
})

watch(countChu, () => {
  if (imgList.array.length > 5) {
    if (countChu.value > 5) {
      clearTimeout(xunHuan1)
      // 当页面预览的最后一张图片为图片库中的最后一张时,则停止滚动
    } else {
      xunHuan1 = setTimeout(() => {
        width.value = (-10) * countChu.value
        divImage.value.style.transform = 'translateX(' + width.value + '%)'
        // 设置每次轮播的距离百分比
        divImage.value.style.transitionDuration = '1s'
        // 设置每次轮播过程的时间
        countChu.value++
        // 设置次数的增长
      }, 3000)
      // 设置滚动,由于水平原因无法实现轮播,故设置为当页面最右边的图片为最后一张时,停止滚动
    }
  }
})
// 设置监听事件,当预览的图片不是最后一张时,则继续滚动

const zuo = () => {
  clearTimeout(xunHuan1)
  if (countChu.value <= 1) {
    return
  }
  width.value += 10
  countChu.value--
  divImage.value.style.transform = 'translateX(' + width.value + '%)'
  setTimeout(xunHuan1)
}
// 设置左侧箭头点击事件

const you = () => {
  clearTimeout(xunHuan1)
  if (countChu.value >= 5) {
    return
  }
  width.value -= 10
  countChu.value++
  divImage.value.style.transform = 'translateX(' + width.value + '%)'
  setTimeout(xunHuan1)
}
// 设置右侧箭头点击事件

onMounted(() => {
  countChu.value = 1
  miaoshuList.value = [
    {
      mingcheng: '凤皇传',
      shichang: '120分钟',
      leixing: '喜剧 / 古装',
      daoyan: '梁文弋'
    },
    {
      mingcheng: '风暴',
      shichang: '104分钟',
      leixing: '动作 犯罪 警匪',
      daoyan: '袁锦麟'
    },
    {
      mingcheng: '废柴特工',
      shichang: '96分钟',
      leixing: '喜剧 / 动作',
      daoyan: '玛·诺里扎德'
    },
    {
      mingcheng: '罪之声 ',
      shichang: '142分钟',
      leixing: '悬疑 / 犯罪',
      daoyan: '土井裕泰'
    },
    {
      mingcheng: '小妇人',
      shichang: '135分钟',
      leixing: '剧情 / 爱情',
      daoyan: '格蕾塔·葛韦格'
    },
    {
      mingcheng: '无人区',
      shichang: '117分钟',
      leixing: '剧情 / 犯罪 / 西部',
      daoyan: '宁浩'
    },
    {
      mingcheng: '妈妈!',
      shichang: '109分钟',
      leixing: '剧情',
      daoyan: '杨荔钠'
    },
    {
      mingcheng: '线人',
      shichang: '113分钟',
      leixing: '剧情 / 动作 / 惊悚',
      daoyan: '林超贤'
    },
    {
      mingcheng: '狙击手',
      shichang: '96分钟',
      leixing: '剧情 / 历史 / 战争',
      daoyan: '张艺谋 / 张末'
    },
    {
      mingcheng: '绝地逃亡',
      shichang: '111分钟',
      leixing: '喜剧 / 动作',
      daoyan: '雷尼·哈林'
    }
  ]
  // 设置电影描述信息
})
// 页面载入时赋值
const mouseEenter = () => {
  clearTimeout(xunHuan1)
}
// 鼠标移入时停止播放

const mouseLeave = () => {
  setTimeout(xunHuan1)
}
/// 移除时继续播放
</script>

<style scoped>
#kuang_jia {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 300px;
  margin: 20px;
  border: azure 3px solid;
}

#miaoshu {
  width: 200px;
  height: 300px;
  margin: 23px;
  float: left;
  position: relative;
  text-align: center;
  top: -700px;
  background-color: rgba(0, 0, 255, 0.3);
  font-size: 20px;
  color: aliceblue;
}

#img {
  width: 1230px;
  height: 340px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

img:hover {
  transform: scale(1.05)
}

/* 设置鼠标移到图片上的效果 */

#img div {
  width: 2460px;
  height: 340px;
  position: relative;
  background-color: bisque;
}

.zuo, .you {
  font-size: 50px;
  position: relative;
  cursor: pointer;
  display: block;
  width: 50px;
  height: 50px;
  color: aqua;
}

.zuo {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}

.you {
  position: absolute !important;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

input {
  position: relative;
  margin: 20px;
  border: 0;
  top: -25px;
  right: 50px;
  float: right;
  font-size: 18px;
  background-color: rgba(0, 200, 0, 0.3);
}

/*  扩展:!important(Css属性) */
/* 用法: https://www.runoob.com/css/css-important.html */
</style>

尝试过的解决方法

这么写报错

根据你提供的代码，我看到你想要实现在输入查询后立即在最左边显示查询结果。问题可能出在以下几个地方：

在imgList中，你使用了响应式对象（reactive）来存储图片数组和查询文本，但是在模板中绑定时，却使用了错误的属性名array和text。需要将imgList.array改为imgList.arrayList，将imgList.text改为imgList.text。

在arrayList的计算属性中，你使用了miaoshuList，但是在代码中并未定义miaoshuList，需要将miaoshuList改为imgList.miaoshuList。

在zuo()和you()方法中，你调用了setTimeout(xunHuan1)，但是缺少等待时间参数，需要修改为setTimeout(xunHuan1, 0)。

综上所述，你可以尝试修改以下代码：

html
<!-- 将 v-model="imgList.text" 和 v-for="(item, index) in arrayList" 中的属性名修改为正确的 imgList 中的属性名 -->
<input id="chaxun" v-model="imgList.text" placeholder="请输入电影名称进行查询" type="text">
...
<img v-for="(item, index) in arrayList" :key="index" alt="" v-bind:src="item"/>

...
<script setup>
...
const imgList = reactive({ arrayList: [], text: '' })
...
const miaoshuList = ref()
...
const arrayList = computed(() => {
  ...
  const arrayChaxun1 = imgList.miaoshuList.filter(x => x.mingcheng.includes(imgList.text))
  ...
})
...
const zuo = () => {
  ...
  setTimeout(xunHuan1, 0)
}
...
const you = () => {
  ...
  setTimeout(xunHuan1, 0)
}
...
</script>

希望这些修改能够解决你的问题。如果还有其他问题，请随时提问。

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7651864
• 你也可以参考下这篇文章：分布式预约挂号平台（七） | 郑医宝の医院设置接口 前端环境搭建 ~ 前后端建立连接 ~ 增删改查的实现
• 除此之外, 这篇博客: 性能优化之回流重绘中的 既然将元素独立图层后不会发生回流重绘，或者说重绘的范围大大缩小，那么是不是只要将元素独立图层就一定能提高性能呢？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  对于类似动画元素这种频繁引发页面回流重绘的元素来说，独立出来一个图层是能更好的提高渲染方面的性能，但是创建一个图层并不是免费的，它需要消耗额外的内存和管理资源。在内存资源有限的设备上，合成层带来的性能改善，可能远远赶不上过多合成层开销给页面性能带来的负面影响。比如一些较旧的手机和电脑，开启加速，无论是电池还是发热量都会比平时高。
  同时，由于每个渲染层的纹理都需要上传到GPU处理，因此我们还需要考虑CPU和GPU之间的带宽问题，以及有多大内存供GPU处理这些纹理。

  元素未独立图层
  
  
  元素独立图层
  
  
  以上文章为个人理解加上实践结果，如有理解不正确的地方，还请指正，感激不尽。

• 您还可以看一下 幸磊老师的微擎模块开发从基础应用开发到模块上架实战视频教程课程中的 建立模块应用的后台，调试微信小程序前端的搭建小节, 巩固相关知识点
  
• 以下回答来自chatgpt:

  根据参考资料中的内容，可以看出你的代码存在以下问题：你需要在查询功能被触发时，将查询结果显示在最左边，并且通过左右点击按钮来进行查询。下面是针对这些问题的解决方案：

  1. 显示查询结果在最左边： 首先，需要获取查询结果，并将其存储在一个变量中。然后，将该变量的值显示在界面最左边的位置。以下是一个示例代码：

  # 假设result是查询结果的变量
  result = get_query_result()
  
  # 将result显示在界面最左边的位置
  left_display_area = tk.Text(root)
  left_display_area.insert("1.0", result)
  left_display_area.pack(side="left")
  

  1. 通过左右点击按钮进行查询： 为了实现通过左右点击按钮进行查询，可以使用两个按钮来触发查询操作。一个按钮用于向左查找，另一个按钮用于向右查找。以下是一个示例的代码：

  # 创建向左和向右查找的按钮
  left_button = tk.Button(root, text="向左查找", command=left_search)
  left_button.pack(side="left")
  
  right_button = tk.Button(root, text="向右查找", command=right_search)
  right_button.pack(side="left")
  
  def left_search():
      # 向左查找的逻辑代码
  
  def right_search():
      # 向右查找的逻辑代码
  

  在上述代码中，left_search()和right_search()函数分别处理向左和向右查找的逻辑。

  如果你在代码中的其他部分还存在问题，比如变量初始化等，你需要根据具体代码和错误提示来进行修改。希望以上解决方案对你有帮助。如果还有其他问题，请告诉我，我会尽力帮助你。

  如果你不能提供你的代码，那么对于这个问题，我无法提供更精确的解决方案。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

看一看

1.显示查询的话watch 或者 mounted 生命周期钩子解决下，在 watch 中监听搜索词，发生变化的话你显示查询结果，或者在mounted 中添加一个时间延迟就可以了
2.左右箭头的点击无效问题，你可以在methods中添加点击事件,在事件中调用清除轮播的逻辑就行

能不能双向绑定数据？不能的话用生命周期钩子。watch mounted数据变化了，再调用这个显示数据。