VueJS2 和 Window 对象 - 如何使用？

Question

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

这是我在 JSFIDDLE 中的测试代码：DEMO 要查看问题，请选择 "DEF" 下拉菜单，然后选择 select BRIEF，然后查看页面底部的元素 'Fill out the Brief form here'。

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 中使用 window 对象以便触发自定义函数的任何提示？目前没有任何事情发生。

Answer 1

我最后添加了以下代码来完成这项工作：

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

然后将点击处理程序添加到视图中：

v-on:click="$showCollectorDialog"

VueJS2 和 Window 对象 - 如何使用？

VueJS2 and the Window Object - how to use?

javascript

jquery

jira-rest-api

vuejs2