xxxxxxxxxx1
<template>2
<MDBContainer>3
<MDBTabs v-model="activeTabId1">4
<!-- Tabs navs -->5
<MDBTabNav tabsClasses="mb-3">6
<MDBTabItem tabId="ex1-1" href="ex1-1">Tab #1</MDBTabItem>7
<MDBTabItem tabId="ex1-2" href="ex1-2">Tab #2</MDBTabItem>8
<MDBTabItem tabId="ex1-3" href="ex1-3">Tab #3</MDBTabItem>9
</MDBTabNav>10
<!-- Tabs navs -->11
<!-- Tabs content -->12
<MDBTabContent>13
<MDBTabPane tabId="ex1-1"><MDBInput :key="inputKey" label="Example label" v-model="input1" /></MDBTabPane>14
<MDBTabPane tabId="ex1-2"><MDBInput :key="inputKey" label="Example label" v-model="input2" /></MDBTabPane>15
<MDBTabPane tabId="ex1-3"><MDBInput :key="inputKey" label="Example label" v-model="input3" /></MDBTabPane>16
</MDBTabContent>17
<!-- Tabs content -->18
</MDBTabs>19
</MDBContainer>20
</template>xxxxxxxxxx1
<style>2
#app {3
font-family: Roboto, Helvetica, Arial, sans-serif;4
}5
</style>xxxxxxxxxx1
<script>2
import {3
MDBTabs,4
MDBTabNav,5
MDBTabContent,6
MDBTabItem,7
MDBTabPane,8
MDBInput,9
} from 'mdb-vue-ui-kit';10
import { ref, watch } from 'vue';11
12
export default {13
components: {14
MDBTabs,15
MDBTabNav,16
MDBTabContent,17
MDBTabItem,18
MDBTabPane,19
MDBInput,20
},21
setup() {22
const activeTabId1 = ref('ex1-1');23
const input1 = ref('');24
const input2 = ref('');25
const input3 = ref('');26
const inputKey = ref(0);27
28
watch(() => activeTabId1.value, () => inputKey.value++);29
30
return {31
activeTabId1,32
input1,33
input3,34
input2,35
inputKey36
};37
},38
};39
</script> Console errors: 0