Question

您好，当我向fullcalender事件添加一些自定义按钮时，它不适用于vuejs方法。

它正在使用核心javascript，我想使用vuejs方法，我该怎么做？

这是我的代码：

eventRender(info) {
        // console.log(info)
        $(info.el).find(".fc-content").append(`
        <div class="btn-group" role="group" style=" float: right; top: 10px; right: 10px; margin: 0; padding: 0; position: absolute; ">
                            <button @click="vuejsMehtodName('Unpaid')" type="button" class="btn btn-sm btn-default btn-secondary">Unpaid</button>
                            <button @click="vuejsMehtodName('Unseen')" type="button" class="btn btn-sm btn-primary btn-secondary">Unseen</button>
                            <button @click="vuejsMehtodName('Cancel')" type="button" class="btn btn-sm btn-danger btn-secondary">Cancel</button>
                        </div>
          `);
      },

我尝试使用@ click.native来获得相同的结果！我该如何解决？谢谢。

Answer 1

我用该代码解决了我的问题，正如我告诉你的那样，我正在使用fullcalendar，并在事件后添加一些按钮：

        // console.log(info)
        $(info.el).find(".fc-content").append(`
        <div class="btn-group" role="group" style=" float: right; top: 10px; right: 10px; margin: 0; padding: 0; position: absolute; ">
                            <button id="Unpaid" type="button" class="btn btn-sm btn-default btn-secondary">Unpaid</button>
                            <button id="Unseen" type="button" class="btn btn-sm btn-primary btn-secondary">Unseen</button>
                            <button id="Cancel" type="button" class="btn btn-sm btn-danger btn-secondary">Cancel</button>
                        </div>
          `);
      },

您必须在eventClick方法中将id添加到按钮（看不见，未付费，取消）后，必须检查它是否被单击，才能找到具有这样id的对象

eventClick(info) {
        if(info.jsEvent.toElement.id=='Unpaid' || info.jsEvent.toElement.id=='Unseen' || info.jsEvent.toElement.id=='Cancel'){
 this.vuejsMehtodName(info.jsEvent.toElement.id)
 }else{
  // here mean when we click any where on event exept (buttons)
 }
}

之后，您需要在该方法上创建该方法（vuejsMehtodName），您可以执行任何所需的操作。谢谢。

Answer 2

eventRender(info) {
        // console.log(info)
        $(info.el).find(".fc-content").append(`
        <div class="btn-group" role="group" style=" float: right; top: 10px; right: 10px; margin: 0; padding: 0; position: absolute; ">
                            <button @click="vuejsMehtodName('Unpaid')" type="button" class="btn btn-sm btn-default btn-secondary">Unpaid</button>
                            <button @click="vuejsMehtodName('Unseen')" type="button" class="btn btn-sm btn-primary btn-secondary">Unseen</button>
                            <button @click="vuejsMehtodName('Cancel')" type="button" class="btn btn-sm btn-danger btn-secondary">Cancel</button>
                        </div>
          `);
      },

您在语法上遇到了一些错误。这样尝试。

将元素追加到Fullcalender时Vuejs无法正常工作

2 个答案: