vueまたは@clickを使用せずにVue js addイベントをクリックして

Question

Vueインスタンス内にクリックハンドラを追加する方法はありますか？私はajax経由でSVGをロードしています.Vue clickイベントを使用したいと思います。

マイVueのファイルは、次のようになります。

<template> 
    <div> 
     <div class="map" v-html="map"></div> 
    </div> 
</template> 

<script> 
export default{ 
    data : function(){ 
     return { 
      map : 'Loading' 
     }; 
    }, 
    methods : { 
     getMap : function(){ 
      var thisMap = this; 
      axios.get('/img/world-map.svg').then(function (response) { 
       thisMap.map = response.data; 
       thisMap.loading = false; 
      }).catch(function (error) { 
       thisMap.loading = false; 
       console.log(error); 
      }); 
     }, 
    }, 
    mounted : function(){ 
     console.log('WorldMap mounted'); 
     this.getMap(); 
    } 
} 
</script> 

問題は、私はストレートページにかなり大きなSVGをロードしてるということです。完璧な世界では、私はちょうどこのような何かをするだろう：

<template> 
    <div> 
     <div class="map" > 
      <svg> 
       <g @click="groupClicked" class="asia" id="asia" xmlns:svg="http://www.w3.org/2000/svg"> 
        <path stroke="#FFFFFF" d="M715.817,47.266c-4.45,1.25-8.903,2.497-13.357,3.739c-1.074,0.327-8.403,1.757-5.678,3.204 
    c-1.922,2.104-2.993,1.568-5.547,1.536c-1.547,1.333,0.981,1.22-0.558,2.421c-0.976,0.761-0.946,1.257-2.106,0.827 
    c-0.368-0.136-2.223-0.261-1.543,0.759c2.082,1.3,0.231,3.046-1.466,4.011c-1.831-0.38-3.271-1.611-5.245-1.293 
    c-1.229,0.196-2.104,0.763-3.176-0.205c-1.265-1.143,0.371-1.409,1.378-2.177c1.529-1.168,5.473-0.2,2.834-2.668 
    c1.061-0.979,2.07-0.946,3.206-1.736c-0.297-0.416-0.649-0.773-1.067-1.068c1.047-1.075,1.679-3.036,3.497-2.725 
    c1.441,0.249,2.046-1.318,3.182-2.137c1.121-0.811,2.4-1.266,3.771-1.402c1.656-0.165,3.271,0.134,4.347-1.427 
    c0.921-1.334,1.921-1.218,3.468-0.757c1.687,0.504,2.808-0.159,4.442-0.698c2.313-0.118,4.489-0.946,6.812-1.068 
    c1.043-1.941,2.354-2.07,4.375-2.331c0.653-0.085,6.433-0.678,4.774,1.792C721.041,46.198,718.024,46.605,715.817,47.266 
    C711.364,48.516,718.356,46.505,715.817,47.266z"/> 
       </g> 
      </svg> 
     </div> 
    </div> 
</template> 

私はロードだSVGを約300キロバイト大きいと私はすべてのページのロード上のすべての私のJavaScriptで周りのことを運ぶことにしたくないが。

すべてのコメントや解決を歓迎します。

編集私は実際には非常に遠くに完璧ではないですが、現時点では、それはかなり良いようだ。このアプローチ、と持って尋ねて以来

。 GETリクエストが成功した後

var vueBus = new Vue({}); 

$('body').on('click', 'svg g', function(){ 
    var name = $(this).attr('data-name'); 
    vueBus.$emit('svgGroupClicked', name); 
}); 

、その後、私の.vueファイルにリスナーを追加

mounted() : function(){ 
    vueBus.$on('svgGroupClicked', function(){ ... }); 
} 

Answer 1

あなたは単なるJavaScriptでクリックイベントを追加することができます。

axios.get('/img/world-map.svg').then(function (response) { 
    thisMap.map = response.data; 
    thisMap.addClickHandler(); 
    thisMap.loading = false; 
}) 

あなたaddClickHandler方法を

methods: { 
    addClickHandler: function() { 
    var gEl = this.$el.getElementsByTagName('g')[0]; 
    gEl.addEventListener('click', function() { 
     alert('I got clicked'); 
    }); 
    }, 
} 

のようになります。

---

それとも、あなたはjQueryのを使用している場合：

methods: { 
    addClickHandler: function() { 
    $(this.$el).find('g')[0].click(function() { 
     alert('I got clicked'); 
    }); 
    }, 
}