Javascript VueJS2和窗口对象-如何使用？

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

以下是我在JSFIDLE中的测试代码： 要查看问题，请选择DEF下拉列表，然后选择简短，并查看页面底部的元素“在此处填写简短表单”

具有自定义触发器属性的剪切HTML代码：

以下是我如何设置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.ATL_JQ_PAGE_PROPS =  {
    "triggerFunction": function(showCollectorDialog) {
       Vue.prototype.$showCollectorDialog = showCollectorDialog
    }};

然后，单击处理程序被添加到视图中，如下所示：

v-on:click="$showCollectorDialog"

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

v-on:click="$showCollectorDialog"