V-for with template
I am using vue-bootstrap. I try to create dynamic a grid component that gets headers and datas. Since we will not know how many column passed to the component, we should check every item that are passed.
<template>
<b-table striped hover :items="items"></b-table>
<div v-for="title in items">
<template slot="title.key" slot-scope="data">
<input v-if="title.isActive" type="text" v-model="data.value">
<textarea v-else type="text" v-model="data.value"></textarea>
</template>
</div>
</b-table>
</template>
<script>
const items =[
{'label': 'Description', 'key': 'description'},
{'label': 'Name', 'key': 'name', 'isActive': true},
]
So, if isActive is true, then this template should be textarea(Column should be changed with textarea instead of input) However it is not working and no columns changed neither inputbox nor textarea and stay default template
Could you please help on these question.
Thank you
vue.js vuejs2 vue-component bootstrap-vue
add a comment |
I am using vue-bootstrap. I try to create dynamic a grid component that gets headers and datas. Since we will not know how many column passed to the component, we should check every item that are passed.
<template>
<b-table striped hover :items="items"></b-table>
<div v-for="title in items">
<template slot="title.key" slot-scope="data">
<input v-if="title.isActive" type="text" v-model="data.value">
<textarea v-else type="text" v-model="data.value"></textarea>
</template>
</div>
</b-table>
</template>
<script>
const items =[
{'label': 'Description', 'key': 'description'},
{'label': 'Name', 'key': 'name', 'isActive': true},
]
So, if isActive is true, then this template should be textarea(Column should be changed with textarea instead of input) However it is not working and no columns changed neither inputbox nor textarea and stay default template
Could you please help on these question.
Thank you
vue.js vuejs2 vue-component bootstrap-vue
1
items
should be inside yourdata
. And you shouldn't use mustaches inside your attributes.
– Husam Ibrahim
Nov 20 '18 at 5:04
I used <template slot="title.key" slot-scope="data"> and it did not worked as well
– JavaChip
Nov 20 '18 at 5:05
Can you provide a jsfiddle?
– Shubham Patel
Nov 20 '18 at 5:07
It should betitle.isActive
– Bhojendra Rauniyar
Nov 20 '18 at 5:09
Try<template :slot="title.key"...
– Phil
Nov 20 '18 at 5:09
add a comment |
I am using vue-bootstrap. I try to create dynamic a grid component that gets headers and datas. Since we will not know how many column passed to the component, we should check every item that are passed.
<template>
<b-table striped hover :items="items"></b-table>
<div v-for="title in items">
<template slot="title.key" slot-scope="data">
<input v-if="title.isActive" type="text" v-model="data.value">
<textarea v-else type="text" v-model="data.value"></textarea>
</template>
</div>
</b-table>
</template>
<script>
const items =[
{'label': 'Description', 'key': 'description'},
{'label': 'Name', 'key': 'name', 'isActive': true},
]
So, if isActive is true, then this template should be textarea(Column should be changed with textarea instead of input) However it is not working and no columns changed neither inputbox nor textarea and stay default template
Could you please help on these question.
Thank you
vue.js vuejs2 vue-component bootstrap-vue
I am using vue-bootstrap. I try to create dynamic a grid component that gets headers and datas. Since we will not know how many column passed to the component, we should check every item that are passed.
<template>
<b-table striped hover :items="items"></b-table>
<div v-for="title in items">
<template slot="title.key" slot-scope="data">
<input v-if="title.isActive" type="text" v-model="data.value">
<textarea v-else type="text" v-model="data.value"></textarea>
</template>
</div>
</b-table>
</template>
<script>
const items =[
{'label': 'Description', 'key': 'description'},
{'label': 'Name', 'key': 'name', 'isActive': true},
]
So, if isActive is true, then this template should be textarea(Column should be changed with textarea instead of input) However it is not working and no columns changed neither inputbox nor textarea and stay default template
Could you please help on these question.
Thank you
vue.js vuejs2 vue-component bootstrap-vue
vue.js vuejs2 vue-component bootstrap-vue
edited Nov 20 '18 at 5:10
JavaChip
asked Nov 20 '18 at 4:57
JavaChipJavaChip
418
418
1
items
should be inside yourdata
. And you shouldn't use mustaches inside your attributes.
– Husam Ibrahim
Nov 20 '18 at 5:04
I used <template slot="title.key" slot-scope="data"> and it did not worked as well
– JavaChip
Nov 20 '18 at 5:05
Can you provide a jsfiddle?
– Shubham Patel
Nov 20 '18 at 5:07
It should betitle.isActive
– Bhojendra Rauniyar
Nov 20 '18 at 5:09
Try<template :slot="title.key"...
– Phil
Nov 20 '18 at 5:09
add a comment |
1
items
should be inside yourdata
. And you shouldn't use mustaches inside your attributes.
– Husam Ibrahim
Nov 20 '18 at 5:04
I used <template slot="title.key" slot-scope="data"> and it did not worked as well
– JavaChip
Nov 20 '18 at 5:05
Can you provide a jsfiddle?
– Shubham Patel
Nov 20 '18 at 5:07
It should betitle.isActive
– Bhojendra Rauniyar
Nov 20 '18 at 5:09
Try<template :slot="title.key"...
– Phil
Nov 20 '18 at 5:09
1
1
items
should be inside your data
. And you shouldn't use mustaches inside your attributes.– Husam Ibrahim
Nov 20 '18 at 5:04
items
should be inside your data
. And you shouldn't use mustaches inside your attributes.– Husam Ibrahim
Nov 20 '18 at 5:04
I used <template slot="title.key" slot-scope="data"> and it did not worked as well
– JavaChip
Nov 20 '18 at 5:05
I used <template slot="title.key" slot-scope="data"> and it did not worked as well
– JavaChip
Nov 20 '18 at 5:05
Can you provide a jsfiddle?
– Shubham Patel
Nov 20 '18 at 5:07
Can you provide a jsfiddle?
– Shubham Patel
Nov 20 '18 at 5:07
It should be
title.isActive
– Bhojendra Rauniyar
Nov 20 '18 at 5:09
It should be
title.isActive
– Bhojendra Rauniyar
Nov 20 '18 at 5:09
Try
<template :slot="title.key"...
– Phil
Nov 20 '18 at 5:09
Try
<template :slot="title.key"...
– Phil
Nov 20 '18 at 5:09
add a comment |
5 Answers
5
active
oldest
votes
I think you should separate title
in v-for and slot-scope variable to avoid confusing:
<template v-for="title in items" :key="title.key">
<template :slot="title.key" slot-scope="item">
<input v-if="item.isActive" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
</template>
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Is there any error?
– ittus
Nov 20 '18 at 7:04
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
add a comment |
You have to use below snippet.
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
add a comment |
Since, the isActive
property is present inside the object in items
array, you need to access it as a property of an iteratee.
So the code becomes:
<div v-for="title in items">
<template slot="{{title.key}}" slot-scope="{title}">
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
</template>
</div>
add a comment |
Thanks to ittus's answer,after minor modification following way is worked.
<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
Thank you all.
add a comment |
You can check out this example for dynamic columns.
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386482%2fv-for-with-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you should separate title
in v-for and slot-scope variable to avoid confusing:
<template v-for="title in items" :key="title.key">
<template :slot="title.key" slot-scope="item">
<input v-if="item.isActive" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
</template>
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Is there any error?
– ittus
Nov 20 '18 at 7:04
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
add a comment |
I think you should separate title
in v-for and slot-scope variable to avoid confusing:
<template v-for="title in items" :key="title.key">
<template :slot="title.key" slot-scope="item">
<input v-if="item.isActive" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
</template>
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Is there any error?
– ittus
Nov 20 '18 at 7:04
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
add a comment |
I think you should separate title
in v-for and slot-scope variable to avoid confusing:
<template v-for="title in items" :key="title.key">
<template :slot="title.key" slot-scope="item">
<input v-if="item.isActive" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
</template>
I think you should separate title
in v-for and slot-scope variable to avoid confusing:
<template v-for="title in items" :key="title.key">
<template :slot="title.key" slot-scope="item">
<input v-if="item.isActive" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
</template>
answered Nov 20 '18 at 5:11
ittusittus
6,1522723
6,1522723
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Is there any error?
– ittus
Nov 20 '18 at 7:04
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
add a comment |
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Is there any error?
– ittus
Nov 20 '18 at 7:04
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Unfortunately, it did not work...
– JavaChip
Nov 20 '18 at 6:51
Is there any error?
– ittus
Nov 20 '18 at 7:04
Is there any error?
– ittus
Nov 20 '18 at 7:04
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
My bad, after minor modification it is worked. Thank you so much!
– JavaChip
Nov 20 '18 at 7:08
add a comment |
You have to use below snippet.
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
add a comment |
You have to use below snippet.
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
add a comment |
You have to use below snippet.
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
You have to use below snippet.
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
answered Nov 20 '18 at 5:05
Paresh GamiParesh Gami
3,32831327
3,32831327
add a comment |
add a comment |
Since, the isActive
property is present inside the object in items
array, you need to access it as a property of an iteratee.
So the code becomes:
<div v-for="title in items">
<template slot="{{title.key}}" slot-scope="{title}">
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
</template>
</div>
add a comment |
Since, the isActive
property is present inside the object in items
array, you need to access it as a property of an iteratee.
So the code becomes:
<div v-for="title in items">
<template slot="{{title.key}}" slot-scope="{title}">
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
</template>
</div>
add a comment |
Since, the isActive
property is present inside the object in items
array, you need to access it as a property of an iteratee.
So the code becomes:
<div v-for="title in items">
<template slot="{{title.key}}" slot-scope="{title}">
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
</template>
</div>
Since, the isActive
property is present inside the object in items
array, you need to access it as a property of an iteratee.
So the code becomes:
<div v-for="title in items">
<template slot="{{title.key}}" slot-scope="{title}">
<input v-if="title.isActive" type="text" v-model="title.value">
<textarea v-else type="text" v-model="title.value"></textarea>
</template>
</div>
answered Nov 20 '18 at 5:06
waleed aliwaleed ali
319214
319214
add a comment |
add a comment |
Thanks to ittus's answer,after minor modification following way is worked.
<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
Thank you all.
add a comment |
Thanks to ittus's answer,after minor modification following way is worked.
<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
Thank you all.
add a comment |
Thanks to ittus's answer,after minor modification following way is worked.
<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
Thank you all.
Thanks to ittus's answer,after minor modification following way is worked.
<template v-for="column in columns" :slot="column.key" slot-scope="item">
<input v-if="item.isSelect" type="text" v-model="item.value">
<textarea v-else type="text" v-model="item.value"></textarea>
</template>
Thank you all.
answered Nov 20 '18 at 7:07
JavaChipJavaChip
418
418
add a comment |
add a comment |
You can check out this example for dynamic columns.
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
add a comment |
You can check out this example for dynamic columns.
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
add a comment |
You can check out this example for dynamic columns.
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
You can check out this example for dynamic columns.
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
answered Nov 20 '18 at 16:28
nardnobnardnob
416818
416818
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386482%2fv-for-with-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
items
should be inside yourdata
. And you shouldn't use mustaches inside your attributes.– Husam Ibrahim
Nov 20 '18 at 5:04
I used <template slot="title.key" slot-scope="data"> and it did not worked as well
– JavaChip
Nov 20 '18 at 5:05
Can you provide a jsfiddle?
– Shubham Patel
Nov 20 '18 at 5:07
It should be
title.isActive
– Bhojendra Rauniyar
Nov 20 '18 at 5:09
Try
<template :slot="title.key"...
– Phil
Nov 20 '18 at 5:09