将元素附加到 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

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>
          `);
      },

您的语法有一些错误。试试看。

Answer 2

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

        // 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)，您可以做任何您想做的事情。谢谢

将元素附加到 Fullcalender 时 Vuejs 不工作

Vuejs not Working when append element to Fullcalender

javascript

vue.js

vuejs2

fullcalendar

fullcalendar-4