VueJS2和Window对象-如何使用？

Question

我正在尝试使用第三方API从用户收集一些数据。 我不确定如何在Vue实例中进行设置。

这是我在JSFIDDLE中的测试代码： DEMO 要查看该问题，请选择“ DEF”下拉列表，然后选择“ BRIEF”，然后查看“在此处填写Brief表单”页面底部的元素。

带有自定义触发器属性的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"