xxxxxxxxxx
1
<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>
xxxxxxxxxx
1
<style>
2
#app {
3
font-family: Roboto, Helvetica, Arial, sans-serif;
4
}
5
</style>
xxxxxxxxxx
1
<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
inputKey
36
};
37
},
38
};
39
</script>
Console errors: 0