Directive to parse data attributes

[rafaelrinaldi]

I use data attributes sometimes and it would be really helpful to have a directive that parse them and compute to $data. v-data, maybe?

<main id="app" data-foo="bar">My Application</main>

new Vue({
  el: '#app',
  ready: function() {
    console.log('Vue is awesome »', this.foo); // bar
  }
});

What do you guys think?

/ping @yyx990803

[ayamflow]

Yeah I was thinking of something like the attributes from Angular directives. Basically it's an object that contains all attributes from the element. So for instance if you have
<div v-component="da-funk" data-time="20" some-thing="hello"></div>

The attributes hash will look like this:
{ vComponent: "daFunk", dataTime: 20, someThing: "hello" }
It's cool because it doesn't enforce to use the data- convention (but maybe it should).
Obviously some of these attributes are async, so in Angular, this object provide an $observe method similar to the $watch method so any component/directive can trigger logic when some attribute is ready.

[rafaelrinaldi]

@ayamflow Yeah, I don't know much about Angular but that's exactly what I have in mind. Doesn't need to be data attributes exactly, since they will be compiled to the VM instance and will not be part of the rendered markup (though this can be an option, I don't know).

[BigBlueHat]

👍 for this idea! 💡

I'd love to get access to RDFa attributes (as well as data-* and friends). Often the markup comes with data I'd like to load into a ViewModel. I suppose some of that's doable now by digging stuff out of the DOM on created...perhaps.

[yyx990803]

There's an option called paramAttributes: http://vuejs.org/api/instantiation-options.html#paramAttributes

I should probably make it auto-strip data- prefixes.

[BigBlueHat]

Nice! Super basic RDFa example: http://jsfiddle.net/BigBlueHat/bJM5J/

Guessing to get at all the data contained inside of a (potential) RDFa-based "Person" component, I'd still need to dig through the DOM and load that in created? Likely an RDFa library + Vue component generation would be the way to go?

[BigBlueHat]

One challenge I'm facing with paramAttributes is that HTML attributes feel better with dashes, but there's (seemingly) no way to get access to the dash-based things in directives. this['dash-based'] works in the JS, but inside the value of a directive attribute (such as v-if) it's not possible (afiak) to reference it. I've tried this['dash-based'] and $data['dash-based'] style stuff, but neither work.

Thoughts?

[rafaelrinaldi]

@BigBlueHat I think we can use a jQuery-like approach so we could use this['dash-based'] and this.dashBased.

[yyx990803]

Yeah, I'm introducing a much more robust (fully JavaScript compatible) path parser in the next version. That should fix bracket access once and for all...

[rafaelrinaldi]

@yyx990803 Not in the scope of this issue but it would be nice from you if you can share the pipeline you're following for the next releases of Vue. I would love to help you improving the library (since I use it everyday) but it's difficult if I have no idea of what the priorities and the plans are.

[yyx990803]

Checkout out the next branch of the main repo. It is a major rewrite. There's a file named changes.md which you should keep an eye on, although it is subject to change in a lot of aspects.

Basically, notable API changes will be documented, but the internals will change A LOT. Quite some issues I've seen people running into are actually oversight of the original design, and the rewrite is trying to address these edge cases on a fundamental level rather than adding patches.

[Pistos]

One challenge I'm facing with paramAttributes is that HTML attributes feel better with dashes, but there's (seemingly) no way to get access to the dash-based things in directives. this['dash-based'] works in the JS, but inside the value of a directive attribute (such as v-if) it's not possible (afiak) to reference it. I've tried this['dash-based'] and $data['dash-based'] style stuff, but neither work.

So is this impossible in 0.10.6? I feel like a kitten weeps somewhere whenever I don't adhere to the data-hypen-separated-name convention. What I've managed to do is work around it with computed properties that mirror the hypen-separated ones, like this:

    paramAttributes: ['data-likes-count', 'data-likes-desc'],
    computed: {
      likesCount: function() { return this['data-likes-count']; },
      likesDesc: function() { return this['data-likes-desc']; }
    }

[FWSimon]

Does it work :)?

[rafaelrinaldi]

@FWSimon With data and props this isn't needed at all 😃 Just use an object literal as your component settings and you should be good to go. If you still want to use data-* you can write a custom computed property 👍

I'm closing this issue.

[tebaly]

How it work with simlpe Vue instans(not Vue.component to simplify) like

var element = new Vue({
    el: '#element',
    props: ['number'],
    mounted: function () {
        console.log(this.number);
    },
    methods: {
        show: function () {
            console.log(this.number);
        },
    }
});

In html page
<span id="element" number="2" @click="show">0</span>

undefined
undefined