인프런 커뮤니티 질문&답변
작성한 질문수
vue-loading-overlay show 오류 발생
작성
·
360
0
main.js
import VueLoading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/css/index.css'
app.use(VueLoading)LoadingOverlayView.vue
<template>
<div>
<button @click="doSearch">조회</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
sampleData: ''
}
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
doSearch() {
const loader = this.$loading.show()
// simulate AJAX
setTimeout(() => {
loader.hide()
}, 5000)
}
}
}
</script>
오류내용
Cannot read properties of undefined (reading 'show')
TypeError: Cannot read properties of undefined (reading 'show')
at Proxy.doSearch (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/9_module/LoadingOverlayView.vue?vue&type=script&lang=js:15:36)
at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/9_module/LoadingOverlayView.vue?vue&type=template&id=ce3ceda8:9:83)
at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:351:19)
at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:358:17)
at HTMLButtonElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:883:82)무엇 때문에 발생하는 오류일까요?
답변 2
0
leesh2376
질문자
main.js
import 'vue-loading-overlay/dist/css/index.css'
app.component('vue-loading', VueLoading)
// app.use(VueLoading) --> component로 이동
LoadingOverlayView.vue
<template>
<div class="vl-parent">
<vue-loading
v-model:active="isLoading"
:can-cancel="true"
:on-cancel="onCancel"
:is-full-page="fullPage"
/>
<label><input type="checkbox" v-model="fullPage" />Full page?</label>
<button class="btn btn-primary me-2" @click.prevent="doAjax">
fetch Data
</button>
<button class="btn btn-danger" @click.prevent="onCancel">Cancel</button>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
fullPage: true
}
},
methods: {
doAjax() {
this.isLoading = true
// simulate AJAX
setTimeout(() => {
this.isLoading = false
}, 5000)
},
onCancel() {
this.isLoading = false
console.log('User cancelled the loader.')
}
}
}
</script>
우선 위와 같이 수정하니까 되는데
조금 단순하게 하는 방법은 없을까요?
0
