VueJS2和Window對象 - 如何使用？

我正在嘗試使用第三方API從用戶收集一些數據。我不確定如何在Vue實例中進行設置。VueJS2和Window對象 - 如何使用？

這裏是我的測試代碼中的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中的窗口對象的任何提示，以便我可以觸發自定義函數？目前沒有任何事情發生。

來源

2017-08-15 redshift

我最終加入以下代碼，以使這項工作：

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

然後單擊處理程序被添加到視圖這樣：

v-on:click="$showCollectorDialog"

來源

2017-08-16 11:18:57 redshift

VueJS2和Window對象 - 如何使用？

回答

相關問題