Closed
Description
What problem does this feature solve?
There is no way for me to use functions in a functional template.
While I can declare methods outside the scope of the functional-component definition and access it within the render method (Snippet 1), I cannot access it when I use a functional template (Snippet 2).
Snippet 1:
<script>
function emit(listeners, eventName, ...args) {
const eventHandler = listeners[eventName];
if (typeof eventHandler === 'function') {
eventHandler(...args);
}
}
const comp = {
functional: true,
render(h, ctx) {
return h('a', {
attrs: {
href: '#',
},
on: {
click: emit(ctx.listeners, 'open'),
},
}, ['Link']);
},
};
export default comp;
</script>
Snippet 2: Doesn't work
<template functional>
<a
href="#"
@click="emit(listeners, 'open')"
>
Link
</a>
</template>
<script>
function emit(listeners, eventName, ...args) {
const eventHandler = listeners[eventName];
if (typeof eventHandler === 'function') {
eventHandler(...args);
}
}
const comp = {
functional: true,
};
export default comp;
</script>
What does the proposed API look like?
<template functional>
<a
href="#"
@click="methods.emit(listeners, 'open')"
>
Link
</a>
</template>
<script>
const comp = {
functional: true,
methods: {
emit(listeners, eventName, ...args) {
const eventHandler = listeners[eventName];
if (typeof eventHandler === 'function') {
eventHandler(...args);
}
},
},
};
export default comp;
</script>
This is a change in Core, but was asked to remake this issue in vue-loader
Metadata
Metadata
Assignees
Labels
No labels