119 lines
2.6 KiB
Vue
119 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="sample-container">안녕하세요.</div>
|
|
<div ref="valueEl">{{ value1 }}</div>
|
|
<div>{{ comValue2 }}</div>
|
|
<button @click="changeValue">value1 값 변경</button>
|
|
<button @click="comValue2 = 'a,b'">comValue2 값 변경</button>
|
|
|
|
<sub-component ref="subComponent" :text.sync="subText" :text-sub="subText2" @text2_required_change="text2RequiredChange" />
|
|
<button @click="subText = '변경'">subText 변경</button>
|
|
<button @click="notify">notify</button>
|
|
|
|
<br /><br />
|
|
<button @click="setStoreData">스토어 값 설정</button>
|
|
<br /><br />
|
|
<button @click="execCore">core function 실행</button>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Ref, Watch } from 'vue-property-decorator'
|
|
import { CustomFoComponent } from '@/components/custom-fo-component'
|
|
import SubComponent from '@/components/sample/sub-component.vue'
|
|
import { HttpMethod } from '@ustra/core/src/server/http/const'
|
|
|
|
@Component({
|
|
name: 'sample2-index-page',
|
|
components: {
|
|
SubComponent,
|
|
},
|
|
asyncData: async ctx => {
|
|
const result = (
|
|
await ctx.$ustra.api.call({
|
|
url: 'http://localhost:9902/api/npass/test',
|
|
method: HttpMethod.POST,
|
|
data: {},
|
|
})
|
|
).data
|
|
|
|
return { subText: result.body }
|
|
},
|
|
validate: ctx => {
|
|
return !!ctx.route.query.a
|
|
},
|
|
})
|
|
export default class extends CustomFoComponent {
|
|
// #region variables
|
|
value1: string = null
|
|
value2: string = 'a'
|
|
|
|
subText: string = '상위 컴포넌트 Prop 값'
|
|
subText2: string = 'text2 기본 값'
|
|
|
|
@Ref() readonly valueEl: HTMLDivElement
|
|
@Ref() readonly subComponent: SubComponent
|
|
|
|
get comValue2() {
|
|
return this.value1 + this.value2
|
|
}
|
|
|
|
set comValue2(value: string) {
|
|
this.value1 = value.split(',')[0]
|
|
this.value2 = value.split(',')[1]
|
|
}
|
|
|
|
// set comValue2() {}
|
|
|
|
// #endregion
|
|
// #region hooks
|
|
|
|
created() {
|
|
this.value1 = 'value1'
|
|
}
|
|
|
|
mounted() {
|
|
// console.log('refs', this.valueEl)
|
|
this.valueEl.innerHTML = 'test변수'
|
|
}
|
|
|
|
// #endregion
|
|
// #region methods
|
|
|
|
changeValue() {
|
|
this.value1 = 'value1 변경'
|
|
}
|
|
|
|
text2RequiredChange(e) {
|
|
this.subText2 = e
|
|
}
|
|
|
|
notify() {
|
|
this.subComponent.notify()
|
|
}
|
|
|
|
async setStoreData() {
|
|
await this.$core.store.sample.setList(['1', '2', '3'])
|
|
// await this.$ustra.store.sample().setList(['1', '2', '3'])
|
|
console.log(this.$core.store.sample.list)
|
|
}
|
|
|
|
execCore() {
|
|
this.$core.alert('dddd')
|
|
}
|
|
|
|
// #endregion
|
|
// #region watches
|
|
@Watch('comValue2')
|
|
comValue2Changed(v, o) {
|
|
console.log(v, o)
|
|
}
|
|
|
|
// #endregion
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.sample-container {
|
|
margin-top: 200px;
|
|
}
|
|
</style>
|