Question

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

这是我在JSFIDDLE中的测试代码：DEMO 要查看问题，请选择＆＃34; DEF＆＃34;下拉菜单然后选择简介并查看页面底部的元素＆＃39;在此处填写简要表单＆＃39;。

使用自定义触发器属性剪切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"

VueJS2和Window对象 - 如何使用？

1 个答案: