Including a standalone component in vue ant design steps - vue.js

Question

I want to use any design steps component and i wonder how i can include a standalone component from https://www.antdv.com/components/steps/
<template>
<div>
<a-steps :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title" />
</a-steps>
<div class="steps-content">
{{ steps[current].content }}
</div>
<div class="steps-action">
<a-button v-if="current < steps.length - 1" type="primary" #click="next">
Next
</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
#click="$message.success('Processing complete!')"
>
Done
</a-button>
<a-button v-if="current > 0" style="margin-left: 8px" #click="prev">
Previous
</a-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
current: 0,
steps: [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
],
};
},
methods: {
next() {
this.current++;
},
prev() {
this.current--;
},
},
};
</script>
<style scoped>
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
.steps-action {
margin-top: 24px;
}
</style>
this is the code that assigns content in steps
steps: [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
],
How can i include a standalone component.vue here
content: 'First-content',

Answer 1

Change content from a string to a component definition:
import FirstContent from '#/components/FirstContent.vue'
import SecondContent from '#/components/SecondContent.vue'
import LastContent from '#/components/LastContent.vue'
export default {
data() {
return {
steps: [
{
title: 'First',
content: FirstContent,
},
{
title: 'Second',
content: SecondContent,
},
{
title: 'Last',
content: LastContent,
},
],
}
},
}
In your template, replace the string interpolation with <component>:
<component :is="steps[current].content" />
demo