vue
여러분, 저는 Vue, HTML, CSS, Element Plus를 정말 처음입니다.나만의 호버 효과를 가진 사이드바 메뉴를 만들고 싶었어요.그러나 이것은 변경할 수 없습니다.el 메뉴의 배경색을 임의로 변경하면 호버 효과가 사라집니다.el-menu 요소에서 :hover를 사용하여 배경색을 변경해보았지만 이것도 효과가 없는 것 같습니다.기본 호버 효과 색상은 하늘색이지만 밝은 회색으로 필요합니다. Vue3를 사용하고 있다 사용하고 싶은 사이드바는 https://element-plus.org/en-US/component/menu.html#side-bar 에서 입수할 수 있습니다. …
TypeError: Cannot read properties of undefined (reading ‘0’) at Proxy.render (form1.vue?4692:190:1) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1) form1.vue?4692:190 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0’) at Proxy.render (form1.vue?4692:190:1) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:5030:1) at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160:1) 에러가 발생했습니다. <input type=”text” class=”form-control” v-model=”data[‘item3’][0].item1″ /> 데이터 전송처: item3: [ { item1: ‘SSS’, item2: …
프로젝트에서 Axios를 사용하고 있는데 vue 파일에서 사용할 수 있도록 Axios 함수를 내보내고 싶습니다. 그러나 사용할 때마다 .then()은 정의되지 않았다고 표시됩니다.왜 그런지 알 것 같아요. 왜냐하면 Axios를 비동기 함수로 되돌리기 때문이죠. 그러나 .then()을 사용하여 vue 파일에서 응답을 가져와 사용하려면 어떻게 해야 합니까? 내 vue 코드: stopAll(){ startmeetingApi.stop().then((res) => { this.transcript = res.data.transcript; }); console.log(this.transcript); // this.$router.go(); …
Vue 스파에 문제가 있어요.어떤 페이지에서 다른 페이지로 이동해도 앱은 정상적으로 동작합니다.앱은 e커머스이며, 어떤 제품의 다이렉트 링크를 복사하여 누군가에게 보낼 때는 그 페이지를 읽는데 시간이 많이 걸리지만, 제품 목록에서 특정 제품으로 클릭하면 바로 로딩됩니다.직접 링크만 로드하는 데 시간이 너무 오래 걸렸습니다(예: 10초). 페이지에서 로드 기능을 제거하려고 하는데 같은 문제가 발생해요. 질문에 대한 답변 앱에서 느린 로드를 …
Vue2와 Vuetify를 사용하여 앱을 만듭니다.다음을 사용하여 그룹 이름 및 하위 그룹 이름 + 아이콘을 탐색 드로어에 성공적으로 추가할 수 있습니다.v-for아쉽게도 그룹 아이콘은 추가할 수 없습니다.이 건물에는prepend-icon그룹 아이콘을 설정할 수 있지만 어레이를 통해 루핑하여 추가하고 싶습니다.코드는 다음과 같습니다. <template> <v-navigation-drawer app permanent> <v-list nav dense> <v-list-group v-for=”item in groupItems” :key=”item.id” no-action prepend-icon=”mdi-account-circle”> <template v-slot:activator> <v-list-item-title> {{ …
다음 문서를 사용하여 vue 프로젝트를 만듭니다.https://vuejs.org/guide/quick-start.html#creating-a-vue-application 그리고 나는 이 프로젝트에 순풍을 더하고 싶었다.그래서 이 가이드를 사용했습니다(점 2부터).Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue 다만, 변경은 표시되지 않고, 다음의 경고가 표시됩니다. warn – No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration. warn – https://tailwindcss.com/docs/content-configuration 나는 …
나는 Vite로 Vue-Router를 조롱하는 논리를 이해하려고 한다. 이를 위해 저는 매우 간단한 프로젝트에서 테스트 환경을 설정하고 조롱하려고 했습니다.Vue-Test-Utils의 공식 문서대로 진행하려고 하면 항상 오류가 발생하였습니다.그들이 Jest를 써서 그런지는 모르겠다. 실제 vue-router를 사용하면 문제가 해결되지만 vue-router를 조롱하는 것이 더 나을 것 같습니다. 아래는 프로젝트의 소스코드를 먼저 전달하고 다음으로 받은 에러를 전달하겠습니다. Home.vue <script setup lang=”ts”> import …
여러 개를 사용하는 제품 목록 페이지가 있습니다.ProductCard요소.추가할 필요가 있다Spinner클릭 시 카트 버튼에 추가하지만 추가만 하면Spinner로.v-else나는Spinners어느 곳에서나ProductCard이것만 제어하는 방법ProductCard[ Add to Cart ]버튼을 클릭합니다. 상위 구성 요소: <ProductCard v-for=”product in products” :key=”product.id” :product=”product” /> 하위 구성 요소: <template> <div id=”productCart”> <div> <NuxtLink :to=”`/product/${item.slug}`” /> <NuxtLink v-if=”item.name” :to=”`/product/${item.slug}`”> <h5 id=”productName” v-text=”item.name” /> </NuxtLink> <Button v-if=”!loading” @click=”addToBuyCart({ product: …
필터링 기능을 b-table에 추가하도록 요청받았습니다.맨 위 행 슬롯을 사용하여 제공하지만, 어떤 열에 적용되는지 제어할 수 있으면 좋겠습니다(사용자는 마지막 열을 필터링할 수 없습니다. 입력란이 없어야 합니다).그것을 제외하는 것이 가능합니까? 대단히 고맙습니다 질문에 대한 답변 Wimanicesir의 조언에 감사드립니다!나 스스로 해결할 수 있었다.열 중 하나를 제외하려면 다음과 같은 v-if 명령을 사용해야 합니다.
내 Vue 앱에 가져온 월 목록이 있습니다.그것들을 시간순으로 표시하고 싶습니다.1월, 2월, 3월 등 페이지의 데이터만 사용하시면 어떻게 할 수 있는지 다른 글을 읽어보았습니다. data: function () { return { monthNames: [ { month: “January”, position: “01” }, { month: “February”, position: “02” }, { month: “March”, position: “03” }, { month: “April”, position: “04” }, …
외부 Vue 템플릿이 있습니다. <template> <v-container fluid> <div> <v-row> <v-col md=”4″ class=”pa-1″ v-for=”i in allComponents” :key=”i.id”> <gokb-reviews-title-card :id=”i.id.toString()” @keys=”addkeyFields” /> </v-col> </v-row> </div> </v-container> </template> 및 내부 Vue 템플릿(gokb-reviews-title-card) <template> <v-card class=”elevation-4 flex d-flex flex-column” v-if=”!!title?.name”> <v-card-title primary-title> <h5 class=”titlecard-headline”>{{ title.name }}</h5> </v-card-title> <v-card-text class=”flex” v-for=”(i, count) in title.identifiers” :key=”i.id”> <div v-if=”count == 0″>{{ $tc(‘component.identifier.label’, …
정상적으로 동작하는 다른 컴포넌트와 마찬가지로 컴포지션 API를 사용하여 nuxt 프로젝트에서 vue 3 template ref를 사용하고 있습니다.단, 이 경우 null을 반환합니다. 템플릿은 다음과 같습니다. <template> <div class=”horizontal-scroll-fix” ref=”container”> <div class=”horizontal-scroll-fix__scroll-fix”> <container class=”horizontal-scroll-fix__container”> <div class=”horizontal-scroll-fix__viewport” ref=”viewport”> <div class=”horizontal-scroll-fix__wrapper” ref=”wrapper”> <slot></slot> </div> </div> </container> </div> </div> </template> <script> import { ref, computed, onMounted, onBeforeUnmount, useSlots } from ‘vue’; …