Looping out input attributes? - vue.js

Question

I have an input inside a component and wish to pass in an arbitrary number of
attributes depending on the situation in which it is used:
<input type="text" data-a="a" data-b="b" data-c="c">
I have a prop with the attributes but how can I loop them out to build attributes on an input?

Answer 1

Element has a dataset property. You can iterate it with Object.keys. And if you want to iterate all attributes of the element, use getAttributeNames() method.
var el = document.getElementsByTagName('input')[0]
// data-* attributes
Object.keys(el.dataset).forEach(key => {
console.log('data-' + key, el.dataset[key])
})
// all attributes
el.getAttributeNames().forEach(name => {
console.log(name, el.getAttribute(name))
})
<input type="text" data-a="a" data-b="b" data-c="c">

Answer 2

You can set the attributes of an element using the v-bind directive, which can be passed an object where each key is the attribute and value is the value for the attribute.
You say you are passing the attributes you'd like to bind as a prop. I'm going to assume your data structure since you didn't specify (if this isn't your data structure, you would need to create a computed property to format your data in this way):
{ 'data-a': 'a', 'data-b': 'b', 'data-c': 'c' }
And then, assuming the name of your prop is attrs, you would simply add the attributes to the input using v-bind like so:
<input type="text" v-bind="attrs">
Here's an example:
Vue.component('child', {
template: `<input type="text" v-bind="attrs">`,
props: {
attrs: { Object, default: () => ({}) }
}
});
new Vue({
el: '#app',
data() {
return {
myAttrs: {
'data-a': 'a',
'data-b': 'b',
'data-c': 'c',
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child :attrs="myAttrs"></child>
</div>

Answer 3

You can use vuejs render function like
Vue.component('child', {
data() {
return {
attrs: {
'data-a': 'a',
'data-b': 'b',
'data-c': 'c'
}
}
},
render(h) {
return h('input', {
attrs: {
...this.attrs
}
})
}
});

Answer 4

This is how you can set attributes dynamically. Fiddle
Template =>
<div id="app">
<p class="text" v-bind="options">{{ message }}</p>
</div>
Script =>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
propName: 'hello'
},
computed: {
options() {
return {
[`data-${this.propName}`]: this.message
}
}
}
})