Skip to content

Instantly share code, notes, and snippets.

@adamwathan
Forked from kubacode/rendered.html
Last active March 27, 2018 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamwathan/18d55f72cd439bb188aae8f26a9b0e76 to your computer and use it in GitHub Desktop.
Save adamwathan/18d55f72cd439bb188aae8f26a9b0e76 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(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: (item) => {
return {
input: (e) => { this.newQty = e.target.value },
change: (e) => {
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