web-dev-qa-db-ja.com

VueJS-リンクのクリック時にデフォルトを防ぐが、オブジェクトもキャプチャする

私はVue.JSを学んでおり、ちょっとした問題にぶつかりました。ユーザーが_<a href="#"></a>_タグ、e.preventDefault()をクリックし、リンクに関連付けられているオブジェクトを取得できるようにします。ここに私のコードがあります（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オブジェクトを取得する限り機能しますが、リンクを起動します。e.preventDefault()とオブジェクトを取得する必要があります。

ありがとう！

javascripthtmlvue.js
22
NightMICU

ドキュメント は、$ 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)
24
Patrick Evans

または、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;
            }
...
35
nils