Question

我正在为自己的项目使用Vue JS，并发现了一些绊脚石。

我用过：

<input v-model="spam" @keyup="spamegg=true;" @blur="spamegg=false;" />
<div v-if="spamegg" class="someclass">
    <a v-for="str in arr" @click.prevent="foobar(); barbaz();" href="#">{{ str }}</a>
</div>

但是没有触发click事件。

我的foobar方法包含：

foobar: function() {
    console.log('clicked');
}

barbaz功能也是如此。

有趣的是我已经检查了@mouseover事件及其正常运行。

FWIW，就CSS而言，div实际上是一个下拉列表。

如果您需要更多信息，请告诉我。

Answer 1

是的，所以我在jsfiddle中尝试了您的示例，首先在@blur处理程序中输入了错字，您将spmaegg代替了spamegg。但是，即使已修复此问题，点击事件仍无法正确注册。删除模糊事件可使它们正确注册。我认为这是因为模糊发生在mousedown上，但是click事件直到mouseup之后才被触发，因此包含链接的div实际上在完全单击之前就消失了。不幸的是，您似乎需要一种新的下拉机制，也许在输入元素和链接列表周围有一些容器可以监听模糊事件，因此，单击链接列表不会使容器模糊并且它将保持打开状态。

作为参考，这是我删除了模糊处理的小提琴，您可以看到控制台输出正确触发了：https://jsfiddle.net/L1khuca2/

Answer 2

由于您要实现某种下拉菜单，因此我建议在单击链接并将链接文本值添加到输入后隐藏div，并且应该删除@blur事件：

new Vue({
  el: '#app',
  data: {
    spam: '',
    spamegg: false,
    arr: ["aaa", "bbb", "ccc"]
  },
  methods: {
    foobar: function(str) {
      console.log('clicked');
      this.spam = str;
      // this.spamegg = false;
    },
    barbaz() {
      console.log('bar');
    }
  }

})

body {
  height: 500px;
  width: 100%;
  display: flex;
  padding: 10px;
  flex-direction: column
}

#app {
  background: #725585;
  height: 100%;
  width: 100%;
  padding: 20px
}

.someclass {
  display: flex;
  flex-direction: column
}

a {}

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app" @click.stop="spamegg = false;">
    <input v-model="spam" @keyup="spamegg=true;" />

    <div v-if="spamegg" class="someclass">
      <a v-for="str in arr" @click.prevent="foobar(str); barbaz();" href="#">{{ str }}</a>
    </div>
  </div>

点击事件未触发，但鼠标悬停正常

2 个答案: