From Group - Bootstrap-Vue
HTML
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div id="app">
<b-form-group v-for="(f, i) in fields" :key="`field-%{i}`">
<template slot="label">{{f.label}} <sub>{{f.sub}}</sub></template>
<b-form-input v-model="f.model"></b-form-input>
</b-form-group>
</div>
CSS
#app {
padding: 20px;
}
JavaScript
new Vue({
el: '#app',
data() {
return {
fields: [
{label: 'Label', sub: 1, model: ''},
{label: 'Label', sub: 2, model: ''},
{label: 'Label', sub: 3, model: ''}
]
}
}
})