将元素附加到Fullcalender时Vuejs不起作用

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

我用该代码解决了我的问题， 正如我告诉你的，我正在使用全日历，并且我在事件中附加了一些按钮：

        // 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 添加到按钮（Unseen、Unpaid、Cancel）之后，您必须检查它单击的元素，您可以使用类似的 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>
          `);
      },

您在语法中遇到了一些错误。就这样试试吧。