[游戏开发]解决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;
      }
    }
  }
};

创作挑战赛

新人创作奖励来咯，坚持创作打卡瓜分现金大奖