VueJS2とウィンドウオブジェクト - 使い方は？

Question

サードパーティAPIを使用して、ユーザーからデータを収集しようとしています。私はこれをVueインスタンスで設定する方法については不明です。

はここJSFIDDLEで私のテストコードです：DEMO 「ここに簡単なフォームに必要事項を記入」「DEF」のドロップダウンを選択し、問題を参照して、簡単な選択し、ページの一番下にある要素を表示するには。

カスタムトリガー属性を持つ

スニップHTMLコード：

<div class="alert alert-warning" v-if="(!selectedOffice.inJira) && (product ==='Brief')">Fill out the Brief <a href="#" class="myCustomTrigger"> form here</a></div> 

データコレクタのためのJavaScriptコード：

jQuery.ajax({ 
    url: "https://organik.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/1gaygj/b/c/3d70dff4c40bd20e976d5936642e2171/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector-embededjs/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector-embededjs.js?locale=en-US&collectorId=208a7651", 
    type: "get", 
    cache: true, 
    dataType: "script" 
}); 

/* This is the script for specifying the custom trigger. We've replaced 'myCustomTrigger' with 'feedback-button' */ 
window.ATL_JQ_PAGE_PROPS = { 
    "triggerFunction": function(showCollectorDialog) { 
     //Requires that jQuery is available! 
     jQuery(".myCustomTrigger").click(function(e) { 
      e.preventDefault(); 
      showCollectorDialog(); 
     }); 
    }}; 

は、ここで私は私のVueを持っている方法ですインスタンスの設定：

var app = new Vue({ 
    el: '#app', 
    data: { 
    //testMessage: 'hello world', 
    selectedOffice: '', 
    selectedProducts: [], 
    officeList: [] 
    }, //data 
    created: function() { 
    //get API JSON data here 
    //data here for demo 
    this.officeList = [{ 
     code: "ABC", 
     inJira: true 
    }, { 
     code: "DEF", 
     inJira: false 
    }, { 
     code: "GHI", 
     inJira: true 
    }, { 
     code: "JKL", 
     inJira: false 
    }, { 
     code: "External", 
     inJira: false 
    }] 
    }, 
    methods: { 
    clearProductsSelection() { 
     return this.selectedProducts = []; 
    } 
    } 
}); 

私はカスタム関数をトリガすることができますので、Vue内でウィンドウオブジェクトを利用する方法についてのヒントはありますか？現時点では何も起こりません。

Answer 1

私はこの仕事をするために、次のコードを追加してしまった：

window.ATL_JQ_PAGE_PROPS = { 
    "triggerFunction": function(showCollectorDialog) { 
     Vue.prototype.$showCollectorDialog = showCollectorDialog 
    }}; 

そしてクリックハンドラは、なるようにビューに追加されました：

v-on:click="$showCollectorDialog"