javascript - VueJS2 和 Window 对象 - 如何使用？

Question

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

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

Snipped HTML code with custom trigger attribute:

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

The JavaScript code for the data collector:

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
    }};

然后点击处理程序被添加到 View 中，如下所示:

v-on:click="$showCollectorDialog"