对同时隐藏的 div 元素执行点击事件

Question

我写了一个简单的 .vue 文件，它应该显示一个文本输入，当聚焦时显示一个项目列表。我正在苦苦挣扎的是，当我点击一个项目时，我希望它能将文本输入的值设置为该项目。但是，现在使用我的代码，包含项目的 div 在点击事件触发之前隐藏。

如何实现隐藏前的点击事件？

这是我的代码：

<script>
export default {
    name: 'ListCompletion',
    data() {
        return {
            placeholder: "Gamertag",
            items: ['1', '2', '3', '4'],
            toggle: false
        }
    }
};
</script>

<template>
    <div class="Container">
        <input ref="input" type="text" :placeholder="placeholder" @focus="toggle = true" @blur="toggle = false" />
        <div v-show="toggle" class="list-group-flush">
            <button type="button" class="list-group-item list-group-item-action" v-for="item in items" @click="$refs.input.value = item">
                {{ item }}
            </button>
        </div>
    </div>
</template>

在此先感谢您的帮助。

Answer 1

您可以使用 setTimeout:

new Vue({
  el: "#demo",
  data() {
    return {
      placeholder: "Gamertag",
      items: ['1', '2', '3', '4'],
      toggle: false
    }
  },
  methods: {
    handleToggle() {
      setTimeout(() => this.toggle = false, 500)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="Container">
    <input ref="input" type="text" :placeholder="placeholder" 
            @focus="toggle = true" @blur="handleToggle"  />
    <div v-show="toggle" class="list-group-flush" >
      <button type="button" class="list-group-item list-group-item-action"
              v-for="item in items" :key="item" @click="$refs.input.value = item">
        {{ item }}
      </button>
    </div>
  </div>
</div>

Answer 2

您可以尝试 @mousedown。它应该在 @blur 事件之前触发。

<script>
export default {
    name: 'ListCompletion',
    data() {
        return {
            placeholder: "Gamertag",
            items: ['1', '2', '3', '4'],
            toggle: false
        }
    }
};
</script>

<template>
    <div class="Container">
        <input ref="input" type="text" :placeholder="placeholder" @focus="toggle = true" @blur="toggle = false" />
        <div v-show="toggle" class="list-group-flush">
            <button type="button" class="list-group-item list-group-item-action" v-for="item in items" @mousedown="$refs.input.value = item">
                {{ item }}
            </button>
        </div>
    </div>
</template>

对同时隐藏的 div 元素执行点击事件

Performing a click event on element of a div that is hiding at the same time

html

javascript

vue.js