如何在vue模糊之前触发路由器链接点击？

Question

我想在输入中搜索并显示结果。在输入输入后显示结果的 div 时，会出现一些路线，我想单击它们并转到另一个页面。 此外，如果我在输入搜索之外单击，则关闭结果的 div。我在blur 上将visible 更改为false。 但是blur 在router-link 点击之前触发。所以当我点击路由器链接时无法进入新页面。 如何在click 之后强制blur 触发？还是不在结果的div上触发？

var app = new Vue({
  el: '#app',
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div>
    <input @keyup="show()" @blur="visible = false"/>
    <div v-if="visible">
      <router-link
        to="{name: 'sample', params: {sample: 'sample'}}"
      >
       Go to another page
      </router-link>
    </div>
  </div>
</div>

Answer 1

您可以在路由器链接的点击侦听器中隐藏链接，而不是在输入模糊时隐藏链接，就像我在下面的代码中所做的那样。但是，为什么你需要隐藏链接？更改路线将使其删除。

var app = new Vue({
  el: '#app',
    data() {
        return {
                visible: false
            }
        }
    },
    methods: {
        addListener() {
            document.querySelector('#app').addEventListener("click", hideLink );
            this.visible = true;
        }
    }
})


function hideLink(params) {
    document.querySelector('#app').removeEventListener("click", hideLink );
    this.visible = false;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
        <div>
            <input @focus="addListener" />
            <div v-if="visible">
                <router-link
                    to="{name: 'sample', params: {sample: 'sample'}}"
                    @click.prevent.native="visible = false"
                >
                    Go to another page
                </router-link>
            </div>
        </div>
    </div>