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

Make something like :class for dataset #9855

Closed
trenyture opened this Issue Apr 10, 2019 · 3 comments

Comments

Projects
None yet
3 participants
@trenyture
Copy link

trenyture commented Apr 10, 2019

What problem does this feature solve?

I am using a lot the dataset of html and I know I could use :data-something="value" to bind value on the HTML element. But, as you cannot make a for inside the html element (for example to iterate the keys of an object and put it in datas), it could be great to use the same as :class to put datas in the HTML element...

What does the proposed API look like?

For example, you could do something like this :

<div :data="{id: 2, userId: 5, :userName: 'John Doe', userAge: null}">

Would render in pure HTML like this :

<div data-id="2" data-user-id="5" data-user-name="John Doe">

And so you can access this datas in the .dataset of JavaScript or .data() of jQuery.

@posva

This comment has been minimized.

Copy link
Member

posva commented Apr 10, 2019

mmh, I would say this would be a custom directive

@Justineo

This comment has been minimized.

Copy link
Member

Justineo commented Apr 10, 2019

I think this is basically a sub-feature request of #8767 and let's close this in favor of that one.

@Justineo Justineo closed this Apr 10, 2019

@trenyture

This comment has been minimized.

Copy link
Author

trenyture commented Apr 19, 2019

Ok, thanks for the custom directive idea ... It did the trick! ;)
For those looking on the same idea this is my directive :

Vue.directive('datas', function (el, binding, vnode) {
	let d = binding.value;
	if(d != null && d instanceof Object && typeof d == 'object') {
		let idx = Object.keys(d);
		for(let i = 0, len = idx.length; i < len; i++){
			if(d[idx[i]] != null){
				//Here we are going to transform the string in camelCase because of dataset
				el.dataset[idx[i].replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())] = d[idx[i]];
			}
		}
	}
});

And then you could use it like this : <div v-datas="{user-id: 5, user-pseudo: 'trenyture'}">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.