Question

考虑一个代码：

<template >
    <div ref="messages" >
        <div v-for="message in thread" v-on:load="myLoad">
        <p class="chat-time">{{ message.message }}</p>
    </div>
</template>

<script>
    export default {
        name: 'MyName',
        methods : {
            myLoad() {
                console.log(`run`)
            }
        }
    };
</script>

这不起作用。但是，当我将v-on:load更改为v-on:click并开始单击时，我可以看到run控制台。

为什么v-on:load不起作用？

重要

问题是关于使用vue处理html标签的load事件。因此，添加created()或将v-on:load放在<template>上不是解决方案。

Answer 1

您可以创建Vue组件并使用组件实例生命周期挂钩，例如created

Vue.component('custom-comp', {
    props:['prop1','prop2'],
    template: '<div></div>',
    created: function () {
        alert('{{prop1}} created.');
    },
    methods: {}
});

如何使用vue监听html标签的onload事件？

1 个答案: