STEP
Index
<![CDATA[
<template>
<v-container>
<Header :step1Check="step1Check" @go-step2="goStep2" @show-sub-page="showSubPage" />
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step :complete="e1 > 1" step="1">
<v-btn @click="e1 = 1">Name of step 1</v-btn>
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 2" step="2">
<v-btn @click="e1 = 2">Name of step 2</v-btn>
</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-card>
<Step1 v-if="!showStep1Sub" @set-chkey="setChkey" :step1Check="step1Check" />
<Step101 v-else />
</v-card>
</v-stepper-content>
<v-stepper-content step="2">
<v-card>
<Step2 />
</v-card>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-container>
</template>
<script>
import Header from './header'
import Step1 from './step1'
import Step101 from './step1-1'
import Step2 from './step2'
export default {
components: { Header, Step1, Step101, Step2 },
data() {
return {
e1: 1,
step1Check: false,
showStep1Sub: false,
}
},
methods: {
setChkey(chKey) {
this.step1Check = chKey
},
showSubPage() {
this.showStep1Sub = true
},
goStep2() {
this.e1 = 2
this.showStep1Sub = false
},
},
}
</script>
]]>
header
<![CDATA[
<template>
<v-card color="grey lighten-4" flat height="50px">
<v-toolbar dense>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn :disabled="!step1Check" color="primary">시작</v-btn>
<v-btn :disabled="!step1Check" @click="goNext" color="primary">다음</v-btn>
</v-toolbar>
</v-card>
</template>
<script>
export default {
props: {
step1Check: Boolean,
},
data() {
return {
btnStatus: 0,
}
},
methods: {
goNext() {
if (this.btnStatus == 0) {
this.$emit('show-sub-page')
} else {
this.$emit('go-step2')
}
this.btnStatus++
},
},
}
</script>
]]>
Step1
<![CDATA[
<template>
<v-row>
<v-col cols="3">
<LeftArea @chkey-change="chkeyChange" :step1Check="step1Check" />
</v-col>
<v-col cols="9">
<RightArea />
</v-col>
</v-row>
</template>
<script>
import LeftArea from './left-area'
import RightArea from './right-area'
export default {
components: { LeftArea, RightArea },
props: {
step1Check: Boolean,
},
data() {
return {}
},
methods: {
chkeyChange(chKey) {
this.$emit('set-chkey', chKey)
console.log(chKey)
},
},
}
</script>
]]>
left
<![CDATA[
<template>
<v-card class="pa-3">
<v-card-title>Cafe Badilico</v-card-title>
<v-text-field outlined dense></v-text-field>
<v-row>
<v-col>
<v-checkbox dense v-model="chKey" label="Jacob"
v-on:change="$emit('chkey-change', chKey)"></v-checkbox>
</v-col>
<v-col v-if="chKey == true">
<v-text-field outlined dense></v-text-field>
</v-col>
</v-row>
</v-card>
</template>
<script>
export default {
props: {
step1Check: Boolean,
},
created() {
this.chKey = this.step1Check
},
data() {
return {
chKey: false,
}
},
}
</script>
]]>
right
<![CDATA[
<template>
<v-data-table>오른쪽 영역</v-data-table>
</template>
<script>
export default {}
</script>
]]>
Step1 sub
<![CDATA[
<template>
<v-row>
<v-col cols="3">11111</v-col>
<v-col cols="9">22222</v-col>
</v-row>
</template>
<script>
import LeftArea from './left-area'
import RightArea from './right-area'
export default {
components: { LeftArea, RightArea },
data() {
return {}
},
}
</script>
]]>
Step2
<![CDATA[
<template>
<v-row>
<v-col cols="3">
<LeftArea />
</v-col>
<v-col cols="9">
<RightArea />
</v-col>
</v-row>
</template>
<script>
import LeftArea from './left-area'
import RightArea from './right-area'
export default {
components: { LeftArea, RightArea },
data() {
return {}
},
}
</script>
]]>