반응형

vuejs2 7

Vee가 v3 ValidationObserver가 v-for를 사용하여 추가된 동적 유효성 검사 제공자와 함께 작동하지 않음을 확인함

Vee가 v3 ValidationObserver가 v-for를 사용하여 추가된 동적 유효성 검사 제공자와 함께 작동하지 않음을 확인함 V-FOR를 사용하여 생성된 동적 입력을 검증하기 위해 Vee Validate v3을 사용하고 있습니다. V-FOR은 사용자 작업에 따라 입력 요소를 추가하거나 제거합니다. 문제는 마지막 입력만 검증되고 다른 입력은 검증되지 않는다는 것입니다.이 매뉴얼에서는 V-IF 및 V-FOR 매뉴얼 링크를 사용하여 이 문제를 언급하고 있습니다. VueJs Keep-alive 구성 요소를 사용하라고 했지만 V-FOR에서는 작동하지 않습니다. SI No input 1 @{{ index + 1 }} @{{ errors[0] }} Save 내 js 코드 잘 부탁드립니다각 ValdationP..

source 2023.01.15

bootstrap-vue를 사용한 재스트 실행

bootstrap-vue를 사용한 재스트 실행 요즘 부제랑 부트스트랩 부제랑 일하고 있어요유닛 테스트를 프로젝트에 추가하기로 결정. 저는 유닛 테스트에 익숙하지 않기 때문에, 어떻게 동작하는지 알기 위해서 가능한 한 노력하고 있습니다. 로그인.specs.js import { shallowMount, mount } from '@vue/test-utils' import Login from '@/components/auth/Login.vue' describe('Login.vue', () => { it('is a Vue instance', () => { const wrapper = mount(Login, { mocks: { $t: () => 'Connexion' // i18N } }) const h2 = wra..

source 2022.12.31

vue 라우터를 사용하여 모델 제어

vue 라우터를 사용하여 모델 제어 저는 Vue Router와 함께 Vue 2에서 개발한 프로젝트에서 일하고 있으며, Vue Router가 제어하는 모듈로 작업하려고 합니다. 다음 코드를 실행했습니다. 메인 vue 컴포넌트: 통상적인 컴포넌트가 디폴트 라우터 뷰에 로드되고 모든 모달은 모드 라우터 뷰에 로드됩니다. Route Enter 메서드에서 볼 수 있듯이 이전 "from" 루트가 있는지 확인하고 있습니다(즉, 사용자가 앱 내부를 탐색하는 페이지를 얻었음을 의미합니다).디폴트 컴포넌트로 설정하면...그렇지 않은 경우(즉, 사용자가 URL에서 직접 얻은 경우) 대시보드를 기본값으로 설정하면 대시보드가 모달 뒤에서 열립니다. import Dashboard from 'modules/dashboard/com..

source 2022.11.22

vuejs가 있는 하위 구성 요소에서 확인란 선택/선택 해제

vuejs가 있는 하위 구성 요소에서 확인란 선택/선택 해제 콘텍스트: VueJs를 프로젝트에서 처음 사용하기 때문에 제대로 사용하지 못할 수 있습니다. 부모 컴포넌트와 자녀 컴포넌트가 있습니다. 부모 : Research Products.vue : 카테고리별로 필터링할 수 있는 제품 목록을 표시합니다.필터는 제품의 카테고리와 관련된 체크 박스입니다. 아이 : Category Display (카테고리 디스플레이vue : 카테고리 행의 뷰와 메서드를 처리하는 컴포넌트입니다. 질문 내용: 자식 구성 요소 내에서 범주 확인란을 클릭하고 이 확인란을 선택하면 범주가 상위 구성 요소의 필터 목록에 추가됩니다.이거 되는구나. 체크박스를 끄면 카테고리가 이 목록에서 삭제됩니다.이것도 돼요. 사용자가 필터를 더 쉽게 볼..

source 2022.11.22

Vue JS Vuetify $emit이 처음 작동하지 않습니다.

Vue JS Vuetify $emit이 처음 작동하지 않습니다. 2개의 컴포넌트가 있습니다. 식기 구성품 Dish Update 구성 요소 Dish 컴포넌트에서 Dish Update 컴포넌트를 이렇게 Import했습니다. 이건 내 거야modalShow기능.시간이 걸린다dish오브젝트를 생성하여 Dish Update 컴포넌트에 전달합니다.emit. async modalShow(dish) { this.$root.$emit("dish", dish); this.updateDisplay = true; } [ Dish Update ]컴포넌트에서 데이터를 취득한 경우mounted수명 주기 후크: mounted() { this.$root.$on("dish", dish => { this.name = dish.name; }..

source 2022.11.12

브라우저에서 Vue 컴포넌트를 Import하는 방법 - CDN 경유

브라우저에서 Vue 컴포넌트를 Import하는 방법 - CDN 경유 UNPKG를 CDN으로 하여 Vue.js 컴포넌트(@chenfengyuan/vue-qrcode)를 Import하려고 합니다. 현재 설정은 다음과 같습니다. 인마이client.js파일 Vue 인스턴스가 있습니다. new Vue({ el: "#app", data: { msg: "Vue js Hello World - Your First Vue.js App" } }); 제가 실현하고 싶은 설정은 다음과 같습니다. 그러면 나의client.js다음과 같이 됩니다. import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js' import VueQrcode from ..

source 2022.11.02

v-app-bar가 기본 높이를 유지하는 대신 낮은 페이지 콘텐츠에서 아래로 확장됨

v-app-bar가 기본 높이를 유지하는 대신 낮은 페이지 콘텐츠에서 아래로 확장됨 응용 프로그램에 헤더를 추가하고 기본 응용 프로그램 마크업에 대한 지침을 따릅니다.다음 샘플 코드를 사용합니다. header card title 다음과 같은 결과를 얻을 수 있습니다. 보시는 것처럼 헤더는 아래까지 뻗어 있습니다.카드에 더 많은 내용이 있을 경우 해당 내용이 없습니다.복제에 대해서는 Codepen을 참조해 주세요. 이 행동은 바람직한 행동입니까?어떻게 하면 막을 수 있을까요?헤더를 수정하고 싶지 않아서 삭제했습니다.app로부터의 소품v-app-bar이것은 스크롤 시 등에 헤더바가 어떻게 동작해야 하는지를 나타내는 예입니다. #header { background: yellow; } #content { bac..

source 2022.10.18
반응형