Simple programmable slot
by ktsn
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.3/vue.js"></script>
<div id="app">
<input type="number" v-model="index">
<button type="button" @click="update">Update List</button>
<test :index="index">
<div v-for="(num, index) in list">index: {{ index }}, value: {{ num }}</div>
</test>
</div>
JavaScript
const Test = {
props: ['index'],
render(h) {
return this.$slots.default[this.index]
}
}
new Vue({
el: '#app',
data: {
index: 0,
list: Array.apply(null, Array(30)).map((_, i) => i)
},
methods: {
update() {
this.list = this.list.map(i => i * 2)
}
},
components: { Test }
})