2016-04-13 12 views
2

vuejs 1. * jquery.Butで私がv-上のトリガすることができません沿っ:jqueryのv-onをトリガーするには:jquery triggerをクリックしますか?私が使用しています

<a id="test" v-on:click="refresh" href="#" >Cick </a> 

からクリックイベントを、私のjqueryのコードは

​​であると私は

をトリガ試してみました

$("#test).trigger('v-on:click');同様

+0

どういうわけか「refresh」を直接起動できませんか? –

+0

あなたのサンプルにも引用符がありません$( "#test")あなたのコードのようなものでしょうか? – billjamesdev

答えて

2

これは理想的なソリューションではありませんが、ピンチでそれを使用することができます。

あなたが最初Vueのオブジェクトを宣言するときに、あなたがグローバルウィンドウの変数にも推奨されません(それを変数に保存することができますが、それそして、あなたはそれを直接呼び出すことによってrefresh()方法を引き起こす可能性)この例で

window.myVueObj = new Vue({...}); 

に動作します:

$("#test).on('click',function(){ 
    window.myVueObj.refresh(); 
}); 

はやはり、これはrecommeではありませんこれを達成するためには、単純に可能な方法です。

+0

ページの読み込み後に動作しますが、ページが初めて読み込まれたときに動作します。 'TypeError:can not未定義のオブジェクトをオブジェクトに変換する ' –

+0

必要なDOM要素とスクリプトがすべてロードされていることを確認するために、準備関数でラップしてみてください: 'jQuery(document).ready(function(){ (function($){ } ); }); ' –

1

それはあなたが直接)(vm.refresh呼び出すために、あなたのコンポーネントのインスタンスを使用することができます()リフレッシュをトリガーするクリックイベントである必要はありません場合。

2

jqueryを使用して、jqueryイベントをreadyの要素にバインドできます。イベントハンドラのマウスクリックをフィルタ処理して、更新するための複数の呼び出しを取得しないようにする必要があります。サンプルコードを参照

<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
<div id="app"> 
    <a id="test" v-on:click="refresh" href="#"> Refresh <a/> 
    <p> 
    <a onclick="triggerClick()"> jQuery Trigger </a> 
</div> 

<script> 
function triggerClick() { 
    console.log('triggering click from jQuery') 
    $('#test').trigger('click') 
} 

new Vue({ 
    el: '#test', 
    ready: function() { 
     var self = this 
     $(self.$el).on('click', function(evt) { 
      // do not call refresh on mouse click 
      if (typeof evt.originalEvent !== 'object') { 
       self.refresh() 
      } 
     }) 
    }, 
    methods: { 
     refresh: function() { 
      console.log('refresh called') 
     } 
    } 
}) 
</script> 
</body> 
</html> 
関連する問題