Can I inject custom view components into a Vue.js grid component? - components

Question

I have a data grid component in Vue.js, which looks a bit like the one in the official sample: http://vuejs.org/examples/grid-component.html
Based on the input data instead of pure strings sometimes I'd like to display entries "decorated" as a checkbox or a v-link component (not exclusively, I may need to render other components too, like unescaped HTML or an img).
Obviously I don't want to prepare the Grid component for all the use cases, so this is not what I'd like to do:
A sample data model to be displayed:
model = [
{
field1: 'some string',
field2: 'another string',
field3: { // this should be a checkbox
state: true
},
field4: { // this should be an <a v-link>
url: 'http://whatever',
label: 'go somewhere'
}
}
]
A relevant excerpt from the Grid component:
<template>
...
<tr v-for="entry in model">
<td>
<div v-if="typeof entry === 'object' && entry.hasOwnPropery('url')">
<a v-link="entry.url">{{ entry.label }}</a>
</div>
<div v-if="typeof entry === 'object' && entry.hasOwnProperty('state')">
<input type="checkbox" v-model="entry.state">
</div>
<div v-else>
{{ entry }}
</div>
</td>
</tr>
...
</template>
What's the Vue.js philosophy for injecting custom components as decorators? I want my Grid to be completely agnostic regarding these decorator components.

Answer 1

This would be a good place for a mutable component piece. You define a few different decorator components and then use your data to decide which one should be used for rendering.
Template:
<div id="app">
<ul>
<li
v-for="entry in entries"
>
<component :is="entry.type">
{{ entry.content }}
</component>
</li>
</ul>
</div>
Component:
new Vue({
el: '#app',
components: {
'blank': {
template: '<div><slot></slot></div>'
},
'green': {
template: '<div style="color: #0f0;"><slot></slot></div>'
},
'red': {
template: '<div style="background-color: #f00;"><slot></slot></div>'
}
},
computed: {
entries: function() {
return this.raw_entries.map(
function(entry) {
if (typeof entry !== "object") {
return { type: 'blank', content: entry }
}
if (!entry.hasOwnProperty('type')) {
entry.type = 'blank'
}
return entry
}
)
}
},
data: {
raw_entries: [
'Base Text',
{
type: 'green',
content: 'Green Text'
},
{
type: 'red',
content: 'Red Background'
}
]
}
})
JsFiddle Working example using lists