如何判断搜索值是否有变化?

如何判断搜索值是否有变化?

vue中,实现一个搜索框和一个按钮

搜索框内输入搜索值,输入完后点击按钮,触发某个动作,

如果多次点击按钮,用户输入的搜索值可能为空或者重新输入新的内容,

在这种情况下,我需要判断搜索值是否有变化,

如果有变化,不管是空值还是新值,我都触发某个动作,

如果没变化,还是旧值,我就不做任何动作


这时候我是否需要watch监听,但我尝试过,把watch方法放到点击事件中,在还没来得及点按钮时,watch已经监听了搜索值,因为用户在输入一个字符就立即执行了监听,有什么办法让watch监听在点击按钮后才开始监听搜索值?


onSearch是绑定点击按钮事件


const onSearch = () => {

      watch(

        () => state.searchValue,

        (newValue, oldValue) => {

          console.log(newValue, oldValue);        // 在input内输入时就已经执行了

        }

      );

    };


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2022-01-06 10:46:38

同学你好,点击按钮的时候才会执行watch,所以点击按钮后,再输入值,失焦就会出现有监听。但这不是我们想要的效果,建议将watch从方法中拿出来,用了lazy修饰符后也是失焦才监听,这样和点击按钮效果差不多。

另外用了lazy修饰符,相当于是change事件,内容有改变的时候会触发watch,没有改变的时候不会触发watch,所以if判断没必要,可以去掉

https://img1.sycdn.imooc.com//climg/61d657ea0904736304640354.jpg

自己再测试下。

  • 提问者 leepulse #1

    你能写个demo吗?我这边理解有点乱

    2022-01-06 10:59:25
  • 提问者 leepulse #2

    代码我写通了,原本的搜索值没有改变就不做任何事情,现在我想搜索值没有改变也需要做另一个事件,这该怎么办?


    2022-01-06 11:26:07
  • 好帮手慕星星 回复 提问者 leepulse #3

    可以在按钮的点击事件中写操作。也就是watch一直监听,点击按钮的时候进行其他操作。

    2022-01-06 17:41:18
好帮手慕星星 2022-01-06 09:56:25

同学你好,可以试试lazy修饰符

https://img1.sycdn.imooc.com//climg/61d64c2509aa5fe908740253.jpg

在元素失去焦点后改变再触发。祝学习愉快!

  • 提问者 leepulse #1

    我使用了v-model.lazy="searchValue"

    输入搜索值时,确实没有发生监听事件,但在点击按钮的事件中,就没反应了,这是为什么?

    2022-01-06 10:13:02
  • 提问者 leepulse #2

    // 点击搜索逻辑

        const onSearch = () => {

          if (state.searchValue == "") {

            return

          } else if (state.searchValue != "") {

            watch(

              () => state.searchValue,

              (newValue, oldValue) => {

                if (newValue == oldValue) {

                  console.log('搜索值没变化');

                } else if (newValue != oldValue) {

                  console.log('搜索值有变化');

                }

              }

            );

          }

        };

    watch监听不执行,这是为什么?

    2022-01-06 10:29:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师