[游戏开发] 解决computed属性与input的blur事件冲突问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 解决computed属性与input的blur事件冲突问题 -> 正文阅读

[游戏开发]解决computed属性与input的blur事件冲突问题

背景：搜索框在首页和搜索页复用，需要将首页的搜索内容传到搜索页并显示在搜索框内。传送方式是通过在this.$router.push方法中加query字段。

<template>
  <div class="index-container">
    <a-input-search
      class="input-shape"
      v-model="searchInfo"
      placeholder="Search"
      @search="searchPaper(sendSearchInfo)"
      size="large"
    />
  </div>
</template>

export default {
  data() {
    return {
      sendSearchInfo: ''
    };
  },
  methods: {
    searchPaper(sendSearchInfo) {
      this.$router.push({
        path: '/search?',
        query: {
          info: sendSearchInfo
        }
      });
    }
  },
  computed: {
    searchInfo: {
      get() {
        return this.$route.query.info;
      },
      set(val) {
        this.sendSearchInfo = val;
      }
    }
  }
};

问题：在input中输入的数据在失去焦点时会消失
原因：页面初始化的时候会执行get()，之后都不再执行，每次输入数据都会执行set()。在检查中把事件监听器中的blur去掉，就不会出现上述问题。但是打印了onblur是null，所以无法去掉。所以是数据返回的问题。
解决方法：

export default {
  data() {
    return {
      sendSearchInfo: ''
    };
  },
  methods: {
    searchPaper(sendSearchInfo) {
      this.$router.push({
        path: '/search?',
        query: {
          info: sendSearchInfo
        }
      });
    }
  },
  computed: {
    searchInfo: {
      get() {
        // 因为get涉及到this.sendSearchInfo，所以每次set都会触发get
        if (this.sendSearchInfo != '') {
          return this.sendSearchInfo;
        } else {
          return this.$route.query.info;
        }
      },
      set(val) {
        this.sendSearchInfo = val;
      }
    }
  }
};