반응형

vuejs2 272

Vue에서 네스트된 컴포넌트에 슬롯을 '파이프 투게'하는 방법이 있습니까?

Vue에서 네스트된 컴포넌트에 슬롯을 '파이프 투게'하는 방법이 있습니까? 예를 들어 Vue용 확장 Popper.js를 개발하고 있으며 추가 기능을 제공한다고 가정해 보겠습니다.(자녀) 컴포넌트는 다음과 같습니다. {{ content }} Reference Element 보시다시피 이 기능이 작동하려면 slot="reference" 속성을 가진 ".ppper" div 바로 아래에 참조 요소를 정의해야 합니다. 질문: 확장 포퍼 컴포넌트를 재사용 가능한 엔티티로 변환하는 방법(일명 슬롯된 데이터를 간접적으로 전달할 수 있음) //referenced element// slot="reference" 속성을 자녀(ppper.pair-based) 구성 요소 내에 포함하도록 설정하시겠습니까? 기능하지 않은 점: 슬..

IT이야기 2022.06.28

Vue.js에서 .appendChild와 함께 추가된 동적 요소에 v-model 연결

Vue.js에서 .appendChild와 함께 추가된 동적 요소에 v-model 연결 Vue.js 래퍼가 없는 라이브러리로 작업하고 있습니다.라이브러리는 동적 방식으로 DOM에 요소를 추가합니다. 저는 이 모든 것을v-modelVue와 함께 이러한 요소들에 기인하며, 한 번 추가된 요소들은 내 모델에서 함께 작동합니다. Knockout.js와 같은 다른 반응형 프레임워크에서 이 작업을 수행한 적이 있지만 vue.js에서는 이 작업을 수행할 방법을 찾을 수 없습니다. 이렇게 해서 벌이가 되나요?다음 행 중 하나일 것입니다. var div = document.createElement('div'); div.setAttribute('v-model', '{{demo}}'); [VUE CALL] //tell vue..

IT이야기 2022.06.28

드래그 클릭을 방지하려면 어떻게 해야 합니까?

드래그 클릭을 방지하려면 어떻게 해야 합니까? 드래그 앤 클릭 이벤트가 있는 요소를 가지려고 합니다.이벤트 수식어의 조합을 읽고 사용해 보았습니다. 다만, 드래그 정지시에 딸깍 소리가 납니다. 주의: MWE에서는 컴포넌트 자체에서 실행되지만 실제 앱에서는 사용하고 있습니다..native구성 요소를 끄는 한정자 클릭 없이 드래그하려면 어떻게 해야 하나요? 요소Draggable: drag me! am dragged? {{ drag }} am clicked? {{ click }} 아마 효과가 있을 겁니다. 더하다setTimeout내부법handleUp: handleUp() { document.removeEventListener("pointermove", this.handleMove); setTimeout(() ..

IT이야기 2022.06.27

mocha 및 styles-resources-loader가 있는 Vue.js는 종속성 sass를 로드할 수 없습니다.

mocha 및 styles-resources-loader가 있는 Vue.js는 종속성 sass를 로드할 수 없습니다. mochapack이 스타일리소스 로더와 연동되지 않는 문제가 있습니다. 문제의 원인이라고 생각되는 패키지: "@vue/cli-cli-block-unit-mocha": "~4.2.0", "vue-cli-module-style-module-module" : "~0.1.4" 나의vue.config.js파일: const path = require("path"); module.exports = { ... pluginOptions: { "style-resources-loader": { preProcessor: "scss", patterns: [path.resolve(__dirname, "./src/..

IT이야기 2022.06.27

서버 측에서 렌더링된 콘텐츠가 vue로 대체되는 이유

서버 측에서 렌더링된 콘텐츠가 vue로 대체되는 이유 vue의 마운트 지점이 다음과 같은 단순한 index.html 파일이 있습니다. server 보시다시피 서버가 템플릿을 렌더링한 것으로 가정합니다.main.js에는 vue를 마운트하기 위한 다음 코드가 있습니다. const serverRenderedTest = new Vue({ el: '#server-rendered-test', data: { text: 'client' }, template: '{{ text }}' }); vue가 기존 DOM을 "hydraint"할 것으로 예상했지만, 최종 결과(vue 킥인 후)는 다음과 같기 때문에 그렇지 않습니다. client 제가 무엇을 빠뜨리고 있나요?하이드레이션이란 Vue가 새로운 요소를 작성하는 대신 기존 ..

IT이야기 2022.06.25

하위 경로가 여전히 상위 구성 요소만 로드하고 있습니다.

하위 경로가 여전히 상위 구성 요소만 로드하고 있습니다. 그래서 아이 루트가 있는 설정 페이지를 만들려고 합니다.예를 들어 /settings/user, 다음으로 /settings/branches 등을 원합니다.단, /settings 또는 그 자경로를 로드할 때마다 부모 설정 컴포넌트만 표시됩니다. 여기 my routes.js 파일이 있습니다. // Imports import Vue from 'vue'; import VueRouter from 'vue-router'; import Store from './store'; // Set to use Vue.use(VueRouter); // Views import Home from './views/Home/'; import UserIndex from './view..

IT이야기 2022.06.25

VueJS - 이행 그룹이 컴포넌트 리스트의 초기 렌더링을 애니메이션화하고 있습니다.이러한 프로포절은 false입니다.

VueJS - 이행 그룹이 컴포넌트 리스트의 초기 렌더링을 애니메이션화하고 있습니다.이러한 프로포절은 false입니다. 과도기 모임에서 이상한 행동을 하고 있어요 다음과 같은 css 이행이 있습니다. .slide-fade-pop-enter-active { transition: all .4s ease-out; } .slide-fade-pop-enter { background-color: $color-yellow-light; transform: translateY(3px); opacity: 0; } Cart 컴포넌트와 CartItem 서브 컴포넌트가 있습니다.카트 내에는 다음과 같은 카트 아이템이 있습니다. 이것은 초기 렌더링 애니메이션을 트리거하고 있습니다. 보시다시피, 저는 "보기" 속성/프로프를 사용하..

IT이야기 2022.06.25

vue js 팝업에서 카운트다운 타이머가 작동하지 않음

vue js 팝업에서 카운트다운 타이머가 작동하지 않음 카운트다운 후에 다른 사이트로 리다이렉트 하려고 합니다.리다이렉트는 동작하지만 카운트다운은 1회만 감소합니다. 예를 들어 다음과 같습니다.카운터를 5로 설정했습니다.그러나 팝업이 열리면 4가 표시되고 더 이상 줄어들지 않습니다. Redirecting in {{ counter }} 기본적으로 현재 코드에서는 5초 동안 대기하고 리다이렉트하고 있습니다.리다이렉트 하는 것의 부작용 중 하나는 카운트다운을 1씩 줄이는 것입니다. 필요한 것은 카운터를 1초마다 0이 될 때까지 줄이고 다음 체크박스에서 리다이렉트를 실행하는 것입니다. 먼저 카운트다운이 어느 정도인지 확인함으로써 이 작업을 수행합니다.0보다 크면 1초 정도 기다렸다가 카운터를 1만큼 줄인 후 다..

IT이야기 2022.06.25
반응형