vuejs3

Vue 3(CLI): 정의되지 않은 속성을 읽을 수 없습니다(‘get’ 읽기).

by

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) … Read more

Vuejs3 + Axios + Express – 어레이/객체의 데이터 표시

by

Vue를 사용하여 Express API에서 하나의 게시물을 출력하려고 합니다. 문제는 반환된 오브젝트/어레이(post.value)가 템플릿에서 선언한 값(post.title & post.body)을 표시하지 않는다는 것입니다. 어떤 도움이라도 주시면 감사하겠습니다. <template> <div v-if=”post”> <h2>{{ post.title }}</h2> <p>{{ post.body }}</p> </div> </template> <script> import axios from ‘axios’ import { ref } from ‘vue’ import { useRoute } from ‘vue-router’ export default { name: … Read more

전단 오류 > 참조 오류: L이 정의되지 않았습니다.

by

한가지 이상한 사실은 내가 처음 코드를 저장했을 때 지도가 완벽하게 화면에 나타났다는 것이다.하지만 이번 한 번뿐이었다. 나는 무슨 일인지 모르겠다.코드가 완벽해 보이는데 콘솔에 이 오류가 무슨 의미가 있는지 모르겠어요. 다음 오류를 수정할 수 없습니다. runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of mounted hook at <LeafletMap lat=-20.3612397 lng=-40.2958806 > at <[id] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: … Read more

Q-파일 요소 이미지 업로드 미리보기가 올바르게 표시되지 않음

by

처음 이미지 업로드 기능을 구현하려고 하는데 이미지 미리보기가 잘 표시되지 않습니다.다른 투고나 스레드를 둘러보았지만, 실장 방법은 나에게 맞지 않는 것 같습니다. 지금까지 제가 알아낸 건 다음과 같습니다. HTML: <q-file filled bottom-slots v-model=”image” label=”Foto” counter multiple accept=”.jpg, image/*” @update:model-value=”previewImage” > <template v-slot:prepend> <q-icon name=”cloud_upload” @click.stop.prevent /> </template> <template v-slot:append> <q-icon name=”close” @click.stop.prevent=”image = null” class=”cursor-pointer” /> … Read more

WebStorm을 사용하여 Vue 3 스크립트 설정 구성 요소 가져오기

by

WebStorm에서 Vue 3 컴포넌트와 정상적으로 동작하도록 자동 Import 및 코드 완료를 하는 방법이 있습니까?<script setup>문제가 좀 생겼기 때문입니다. FooBar라는 컴포넌트가 있다고 칩시다.vue: <script setup lang=”ts”> import { ref } from ‘vue’ const counter = ref(0) </script> Import를 하고 싶은데 코드 완성에 의해 권장되지 않습니다. 단, 교환할 때는<script setup>단골로<script>, 모든 것이 예상대로 동작합니다. <script lang=”ts”> import … Read more

vue2의 글로벌 믹스에서 vue3의 글로벌 컴포넌트로 이행

by

새 앱을 vue2에서 vue3로 이식합니다.vue3에서 코드를 재사용하는 방법은 mixin을 권장하지 않기 때문에 Im은 이들을 컴포지터블로 변환하려고 합니다. 2개의 믹스인(메서드)이 있습니다.__(key)그리고.__n(key, number)에mixins/translate.js어떤 단어든 앱의 로케일로 변환됩니다. module.exports = { methods: { /** * Translate the given key. */ __(key, replace = {}) { // logic return translation } 자, 이렇게 변환했습니다. 컴포지터블/translate.js export function __(key, replace … Read more

css-loader에 대한 종속성 피어 Webpack5를 확인할 수 없습니다.

by

사실 저는 javascript가 처음이라서 설치하려고 합니다.vue-audio-visual할 수 있습니다.그런데 노드 콘솔에 무슨 관계가 있는지 알 수 없는 이상한 오류가 발생했습니다.npm 에러는 다음과 같습니다. code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: css-loader@6.6.0 npm ERR! Found: webpack@4.46.0 npm ERR! node_modules/webpack npm ERR! peer webpack@”^4.0.0 ^5.0.0″ from @soda/friendly-errors-webpack-plugin@1.8.1 npm ERR! node_modules/@soda/friendly-errors-webpack-plugin npm … Read more

새로 고칠 때까지 vue3 페이지가 스크롤되지 않음

by

나는 vue3 웹 앱을 가지고 있다.제 문제는 일단 다음 방법으로 페이지로 이동하려고 하면<router-link to =”/Dashboard”/> 이하에,Dashboard.vue <template> <div class=”enquiry”> <div class=”row”> <div class=”col-6″ v-for=”(p, index) in keyAreas” :key=”index”> <div class=”card” style=”margin-bottom: 10px”> <div class=”card-body”> <h2 class=”card-title”> {{ p.number }} <span class=”card-title” style=”float: right”>{{ p.title }}</span> </h2> <h5 class=”card-text”> Properties for rent <span class=”card-title” style=”float: right; … Read more

처리되지 않은 약속 거부:

by

처리되지 않은 약속 거부 유형의 오류가 발생하고 있습니다.클릭할 때마다 4개의 다른 에러가 표시됩니다.다음과 같은 것이 있습니다. Unhandled Promise Rejection: TypeError: undefined is not a function (near ‘…contentList.map…’) Unhandled Promise Rejection: TypeError: Right side of assignment cannot be destructured Unhandled Promise Rejection: TypeError: null is not an object (evaluating ‘node.nextSibling’) Unhandled Promise Rejection: TypeError: null is … Read more

버전으로 인해 vue-tsc와 volar가 충돌합니다.

by

vsCode에서 문제가 발생했음을 알립니다. ❗ 다른 vue-tsc 버전 Vue 언어 기능(Volar)의 버전은 1.0.9이지만 작업 공간의 vue-tsc 버전은 0.39.5입니다.이로 인해 다른 유형의 체크 동작이 발생할 수 있습니다. vue-tsc: /home/tomas/Desktop/testing the kid/viteFiles/typscript/typescript-and-vue-workshop/app/node_modules/vue-tsc/package.json 그래서 검색해보니 vue-tsc의 최신 버전을 설치하는 것과 유사한 문제가 해결되었습니다. 둘 다 동일하고 문제가 해결되어야 합니다.제 경우, 저는 그것을 했고 .json 파일이 바뀌었습니다.실제로 지금은”vue-tsc”: “^1.0.9″그러나 … Read more

경로를 입력하기 전에 경로 데이터를 로드하는 권장 방법은 무엇입니까?

by

특정 경로의 페이지를 렌더링하기 전에 먼저 필요한 데이터를 동기화하여 가져오고 싶습니다.이상적으로는 페이지 구성 요소 내에서 데이터를 가져오고 싶지만 라우터 파일에서 가져오는 것을 반대하지는 않습니다.여러 가지 방법을 읽고 시도해 보았지만, 컴포넌트를 만드는 방법에도 여러 가지가 있고 특정 기능의 사용법이 다양하다는 점이 과제 중 하나입니다. 제 경우 Composition API를 사용하여 단일 파일 구성 요소를 만들고 있습니다.<script setup>구문을 … Read more

Import문이 스크립트 셋업 Nuxtjs 3을 중단합니다.

by

제가 이걸 쓸 때import의 스테이트먼트<script setup>아래의 모든 코드가 작동을 멈춥니다. @heroicons 패키지를 설치하고 Import 스테이트먼트를 사용하여 컴포넌트로 사용하고 있습니다.<template>하지만 수입 명세서 아래의 모든 것이 더 이상 작동하지 않습니다.내 코드: <template> <HomeIcon class=”w-5 h-5″> <h1>{{myName}}</h1> </template> <script setup> import {HomeIcon} from ‘@heroicons/vue/24/outline’ const myName = ref(‘username’) </script> 위의 코드를 실행할 때 내 코드에 지정된 제목으로 “사용자 … Read more