Comments (14)
👍 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.
from discussion.
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.
from discussion.
@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).
from discussion.
There's an option called paramAttributes
: http://vuejs.org/api/instantiation-options.html#paramAttributes
I should probably make it auto-strip data-
prefixes.
from discussion.
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?
from discussion.
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?
from discussion.
@BigBlueHat I think we can use a jQuery-like approach so we could use this['dash-based']
and this.dashBased
.
from discussion.
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...
from discussion.
@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.
from discussion.
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.
from discussion.
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']; }
}
from discussion.
Does it work :)?
from discussion.
@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.
from discussion.
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
from discussion.
Related Issues (20)
- Use ||(or) in v-if (with nuxt js)
- Instantiate a copy of a component directly in that component HOT 1
- Call pre-defined javascript method on vue js event
- What about js-data.io?
- How to make vue bind to, or work with, html in properties
- Convert VueJS 1 to VueJS 2 HOT 2
- Third Party Libraries - Make non reactive?
- why v-switch not included in vuejs and what the alternative way HOT 1
- Use raw html inside v-bind
- iOS event bound using addEventListener is not triggering
- How to validate when blur a component.
- Google is not defined HOT 2
- vuejs can not find method or variable inside a callback function HOT 2
- Thousands of rows performance HOT 1
- how to pass Header + Body in POST api using Vue JS-axios HOT 4
- Conditional rendering and child component
- Fetch the value of element dynamically
- Vue breaks DataTables and Pace JS
- Bootstrap4 tag b-form-input has problem with @blur
- Invalid prop: Expected `Basic type`, got Nulll.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from discussion.