Skip to content

Instantly share code, notes, and snippets.

@kubacode
Created March 27, 2018 13:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kubacode/ae392d882292086ca4eed722c9cab620 to your computer and use it in GitHub Desktop.
Save kubacode/ae392d882292086ca4eed722c9cab620 to your computer and use it in GitHub Desktop.
Renderless input with arguement
<div id="app>
<renderless-component v-model="items">
<div slot scope="{ inputAttrs, inputEvents }">
<div v-for="item in items">
<input v-bind="inputAttrs" v-on="inputEvents($event, item)">
</div>
</div>
</renderless-component>
</div>
Vue.component('renderless-component', {
props: ['value'],
data() {
return {
newQty: 0,
}
},
methods: {
changeQty(item) {
item.quantity = this.newQty
this.newQty = 0
}
},
render() {
return this.$scopedSlots.default({
inputAttrs: {
value: this.newQty,
},
inputEvents: {
input: (e) => { this.newQty = e.target.value },
change: (e, item) => {
e.preventDefault()
this.changeQty(item)
}
}
})
},
})
new Vue({
el: '#app',
data: {
items: [
{label: 'One', quantity: 2},
{label: 'Three', quantity: 4},
]
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment