Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for methods in functional component + template #1291

Closed
privatenumber opened this issue May 7, 2018 · 2 comments
Closed

Support for methods in functional component + template #1291

privatenumber opened this issue May 7, 2018 · 2 comments

Comments

@privatenumber
Copy link

@privatenumber privatenumber commented May 7, 2018

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

@privatenumber
Copy link
Author

@privatenumber privatenumber commented May 12, 2018

I can open a PR if the feature request is approved

@LachlanStuart
Copy link

@LachlanStuart LachlanStuart commented Jun 1, 2018

It's possible to access a functional component's methods via $options already, although I couldn't find documentation anywhere.

<template functional>
    <a href="#" @click="$options.methods.emit(listeners, 'open')">Link</a>
</template>
<script>
export default {
	methods: {
		emit(listeners, eventName, ...args) {
			const eventHandler = listeners[eventName];
			if (typeof eventHandler === 'function') {
				eventHandler(...args);
			}
		},
	},
};
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants