VueJS - 防止默认 link 单击但也捕获对象

Question

我正在学习 Vue.JS 并且运行遇到了一些问题。我希望用户能够单击 <a href="#"></a> 标记 e.preventDefault()，并且还可以抓取与 link 关联的对象。这是我的代码（注意我在 {{ 之前有 @ 因为我使用的是 Blade）：

<a href="#"
   class="list-group-item"
   v-repeat="responder: responders"
   v-on="click: showResponder(responder)">
    <div class="media">
        <div class="media-left">
            <img src="" v-attr="src: responder.avatar" alt="" class="media-object"/>
        </div>
        <div class="media-body">
            <h4 class="media-heading">@{{ responder.first_name }} @{{ responder.last_name }}</h4>
            <p>
                <strong><i class="fa fa-phone"></i> Phone:</strong> @{{ responder.phone }}
            </p>
        </div>
    </div>
</a>

和 Javascript:

var vm = new Vue({
    el: "#responderContainer",
    data: {
        activeResponder: null,
        responders: []
    },
    methods: {
        showResponder: function(responder)
        {
            // Here is where I wish to prevent the 
            // link from actually firing its default action
            responder.preventDefault();
            this.activeResponder = responder;
        }
    }
});

就抓取 responder 对象而言，这是可行的，但会触发 link - 我需要能够同时 e.preventDefault() 和获取对象。

谢谢！

Answer 1

documentation说明可以通过$event获取事件对象

http://vuejs.org/guide/events.html

<button v-on="click: submit('hello!', $event)">Submit</button>

/* ... */
{
  methods: {
    submit: function (msg, e) {
      e.stopPropagation()
    }
  }
}
/* ... */

所以你希望 v-on 属性是

v-on="click: showResponder(responder,$event)"

函数定义为

showResponder: function(responder,e)

Answer 2

或者，在 Vue 1.x 中，您还可以使用 event modifier .prevent:

HTML:

<a v-on:click.prevent="showResponder(responder)">...</a>

你也可以停止传播：

<a v-on:click.prevent.stop="showResponder(responder)">...</a>

JS:

...
            showResponder: function(responder)
            {
                // No need to prevent any more
                this.activeResponder = responder;
            }
...

Answer 3

使用

@click.stop

如果您想使用 href 而不是自定义点击事件，则在父元素上停止事件冒泡。

<div @click.stop>
  <a href="//google.ca">Google</a>
</div>

VueJS - 防止默认 link 单击但也捕获对象

VueJS - Prevent Default on link click but also capture object

html

javascript

vue.js