Laravel 如何将图像添加到Vue FullCalendar上的事件？imageurl返回未定义的

我正在尝试使用Vue将图像动态添加到FullCalendar事件中。但首先，我用静态数据进行测试，图像没有显示出来

经过几次研究后，我正试图做到这一点：

<template>
...
<FullCalendar 
                    defaultView="timeGridWeek" 
                    header="null"
                    :slotDuration="slotDuration"
                    :plugins="calendarPlugins"
                    @dateClick="handleDateClick"
                    :allDaySlot="false"
                    :columnHeaderFormat='columnHeaderFormat'
                    :hiddenDays="hiddenDays"
                    :themeSystem="themeSystem"
                    :minTime="minTime"
                    :maxTime="maxTime"
                    :contentHeight="contentHeight"
                    :events="tutor_applications_not_scheduled"
                    :config="config"
                    @eventRender="eventRender"
                />
...
</template>

<script>
import moment from 'moment'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap'

export default {
    components: {
        FullCalendar
    },

    data(){
        return {
            tutor_application_setup_id: this.$route.params.tutor_application_setup_id,

            loading: false,

            uri: '/tutor-applications-schedules/',

            calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin], 
            slotDuration: '01:00',
            columnHeaderFormat: {weekday:'long'},
            hiddenDays: [], //[0,6] - Sunday and Saturday
            themeSystem: 'bootstrap',
            minTime: '10:00', // will be dynamic
            maxTime: '17:00', // will be dynamic
            contentHeight: 'auto',
            config: {
                timeFormat: 'h(:mm) a',
                eventClick: function(event) {
                    if (event.url) {
                    location.replace(event.url);
                    return false;
                    }
                }
            },

            tutor_applications_schedules: [],
            tutor_applications_not_scheduled: [],
            tutor_applications_scheduled: [],

            errors: [],

        }
    },

    methods: {

        handleDateClick(arg){
            alert(arg.date)
        },

        loadTutorApplicationsSchedules(){
            axios.get(this.uri + this.tutor_application_setup_id).then(response=>{
                this.tutor_applications_schedules = response.data.tutor_applications_schedules
                this.loadTutorApplicationsNotScheduled()
                this.loading = true
            });
        },

        loadTutorApplicationsNotScheduled(){

            // this.tutor_applications_schedules.forEach(schedule => {
                // if(!schedule.is_scheduled){
                    this.tutor_applications_not_scheduled.push({
                        title: 'TEST TITLE',
                        start: '2019-05-22 10:00',
                        end: '2019-05-22 13:00',
                        imageurl: '/images/profile/1557196883.png'
                    });
                // }
            // });

        },

        eventRender: function(event, eventElement) {
            console.log(event) // returning everything
            console.log(event.imageurl) // returning undefined
            if (event.imageurl) {
                eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='16' height='16'>");
            }
        },

        loadTutorApplicationsScheduled(){

        },

        moment: function (date) {
            return moment(date)
        },

    },

    mounted(){
        this.loadTutorApplicationsSchedules()
    }
}
</script>

它以字符串形式返回html标记，如

测试标题

我的一些依赖项是：

"vue": "^2.5.17",
"@fullcalendar/bootstrap": "^4.1.0",
        "@fullcalendar/core": "^4.1.0",
        "@fullcalendar/daygrid": "^4.1.0",
        "@fullcalendar/interaction": "^4.1.0",
        "@fullcalendar/timegrid": "^4.1.0",
        "@fullcalendar/vue": "^4.1.1",
        "babel-runtime": "^6.26.0",
        "vue-full-calendar": "^2.7.0",

我不知道该采用哪种方法。有什么帮助吗？多谢各位

更新

我意识到一些参数已更改（），我更改了eventRender函数，现在我可以读取imageurl。然而，我被困在如何在Vue中找到一个标记并用我的图像标记前置

我现在的代码如下所示：

eventRender: function(info) {
            console.log(info) // returning everything
            console.log(info.event.extendedProps.imageurl) // returning the image path correctly
            if (info.event.extendedProps.imageurl) {
                info.el.find("div.fc-content").prepend("<img src='" + info.event.extendedProps.imageurl +"' width='16' height='16'>"); // this line is the problem now
            }
        },

eventRender:函数（信息）{
console.log（info）//返回所有内容
console.log（info.event.extendedProps.imageurl）//正确返回图像路径
if（info.event.extendedProps.imageurl）{
info.el.find（“div.fc-content”）.prepend（“”；//这一行现在是问题所在
}
},

---

它正在返回错误

[Vue warn]：v-on处理程序中的错误：“TypeError:info.el.find不是函数”

，我不知道如何修复它。

在数据中定义一个变量为

imageURL:，

在html中定义img标记，将其显示为

<img v-if="imageURL!=''" :src="imageURL" width='16' height='16'>

这件事可能涉及到谁：），我想好了该怎么办。我将eventRender更改为：

eventRender: function(info) {
            if (info.event.extendedProps.imageurl) {
                info.el.firstChild.innerHTML = info.el.firstChild.innerHTML + "<img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'>";
            }
        },

eventRender:函数（信息）{
if（info.event.extendedProps.imageurl）{
info.el.firstChild.innerHTML=info.el.firstChild.innerHTML+“”；
}
},

在这种情况下，我可以更加灵活，比如：

info.el.firstChild.innerHTML = "<div><h4><a href='#'>"+ info.event.title +"</a></h4><img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'></div>";

info.el.firstChild.innerHTML=“”；

等等

---

我希望这能帮助别人

我就是这么想的，把这个函数放到方法中

eventRender（信息）{
info.el.firstChild.innerHTML=`
${info.event.extendedProps.username}
`
},

现在，为了动态更改每个事件的颜色，我在Laravel资源中进行了更改

'backgroundColor'=>$this->status===1？“#48BB78'：“#F6E05E”

已尝试在eventRender中使用：类，但无效。

---

因此，您只需根据条件在API中发送所需的颜色，然后在laravel上执行该操作。

Hi！谢谢你的回答，但这个解决方案解决不了我的问题。我使用的是FullCalendar组件，因此事件是动态创建的，这意味着我无法设置插入img标记的位置。因此，我想知道如何查找特定的标记，在本例中是

div.fc-content

，并在Vuejs中使用图像标记进行前置。此

info.el.find（“div.fc-content”）.prepend（“”）在Vuejs和Vue FullCalendar中不起作用。我不知道为什么你的不能与类一起工作。我正在使用class，没有任何问题。示例：
info.el.firstChild.innerHTML=info.el.firstChild.innerHTML+“”+props.name+“”
我尝试了这个，但没有成功
：class=“${this.eventClass（info.event.extendedProps.status）}”
您可能会发现另一个线程也很有趣
eventRender: function(info) {
    if (info.event.extendedProps.imageurl) {
        this.imageURL = info.event.extendedProps.imageurl;
    }
}

eventRender: function(info) {
            if (info.event.extendedProps.imageurl) {
                info.el.firstChild.innerHTML = info.el.firstChild.innerHTML + "<img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'>";
            }
        },

info.el.firstChild.innerHTML = "<div><h4><a href='#'>"+ info.event.title +"</a></h4><img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'></div>";