Vue 3 CLI로 전환하여 코드를 리팩터링할 때this.$http.get('/api/todo/')더 이상 작동하지 않습니다.데이터베이스에서 해야 할 일 목록을 반환받는 대신Cannot read properties of undefined콘솔 오류:
app.js:209 Uncaught TypeError: Cannot read properties of undefined (reading 'get')
at Proxy.getTodos (Todos.vue?4897:38:1)
at Proxy.mounted (Todos.vue?4897:28:1)
at eval (runtime-core.esm-bundler.js?d2dd:2722:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?d2dd:2697:1)
at flushPostFlushCbs (runtime-core.esm-bundler.js?d2dd:341:1)
at render (runtime-core.esm-bundler.js?d2dd:6247:1)
at mount (runtime-core.esm-bundler.js?d2dd:4440:1)
at app.mount (runtime-dom.esm-bundler.js?2725:1574:1) 또한 Vue devtools에서 애플리케이션 및 구성 요소 목록이 모두 비어 있습니다.
몇 시간 동안 솔루션을 검색하고 실험했지만 아직 효과가 있는 솔루션을 찾지 못했습니다.
문제의 원인이 되고 있는 현재의 코드는 다음과 같습니다.
Todos.vue에서는 “안녕하세요”를 표시하기 때문에 템플릿이 렌더링되지만 목록 항목이 표시되지 않습니다.
<template>
<div id="TODOS">
Hi there
<ol>
<li v-for="todo in v_todos" :key="todo.id">
<span style="color:red;">{{ todo.name }}</span>
</li>
</ol>
</div>
</template>
<script>
export default {
// el: "#TODOS",
name: 'Todos',
data() {
return {
v_todos: [],
}
},
computed: {},
components: {},
mounted() {
this.getTodos();
},
methods: {
getTodos: function () {
this.$http.get('/api/todo/')
.then((response) => {
this.v_todos = response.data;
})
.catch((err) => {
console.log(err);
})
},
}
</script> App.vue의 경우:
<template>
<div id="App">
<Todos />
</div>
</template>
<script>
import Todos from './components/Todos.vue'
export default {
name: 'App',
components: {
Todos
}
}
</script> HTML 페이지 todos.html에서 다음을 수행합니다.
... <div id="App"></div> ... base.html에서 본문 끝:
<script type="text/javascript" src="{% static 'src/vue/dist/js/chunk-vendors.js' %}"></script>
<script type="text/javascript" src="{% static 'src/vue/dist/js/app.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script> 저는 Vue에 전혀 익숙하지 않기 때문에 솔루션 제안을 알기 쉽게 제시해 주시면 감사하겠습니다.