반응형

vuejs2 87

vuejs router-link가 느린 로드 경로에서 작동하지 않음

vuejs router-link가 느린 로드 경로에서 작동하지 않음 이 가이드에 따라 라우터를 설정합니다.https://router.vuejs.org/en/advanced/lazy-loading.html const PageWaitingRoom= () => import(/* webpackChunkName: "group-CCManageBusiness" */'./../pages/customer-care/manage-business/PageWaitingRoom'); const Routes = [ { path: '/customer-care/manage-business/waiting-room', component: PageWaitingRoom, name: PageWaitingRoom.name } ] 다른 페이지에서..

itsource 2022.08.27

형식 설명서의 다른 vue 모듈에서 vue 모듈 가져오기

형식 설명서의 다른 vue 모듈에서 vue 모듈 가져오기 다른 TypeScript2 Vuejs2 컴포넌트에서 TypeScript2 Vuejs2 컴포넌트의 Import를 도와주시겠습니까? 타깃 모듈(MyTable.vue) 소스 모듈(App.vue) prop: {{propMessage}} msg: {{msg}} helloMsg: {{helloMsg}} computed msg: {{computedMsg}} Greet 최신 TS/Webpack/vue-loader/vue-class-component 버전을 사용하고 있습니다. 유사한 JS(TS가 아님) 기반 코드가 https://github.com/ratiw/vuetable-2-tutorial-bootstrap에서 동작하고 있습니다. 모든 코드는 @ https:/..

itsource 2022.08.27

Vue - 래퍼 구성 요소의 프로펠을 재정의하는 방법

Vue - 래퍼 구성 요소의 프로펠을 재정의하는 방법 Quasar q-select를 다음과 같이 랩하는 래퍼 컴포넌트를 만들었습니다. q-select( :options="organisations" option-value="id" v-bind="$attrs" v-on="$listeners" :option-label="item => item.details.name" :label="$t('organisations.label')") 그리고 이름을 붙였다.OrganisationSelect라벨에 디폴트값을 붙이고 싶다.i18n이제 이걸 덮어쓸 수 있게 됐으면 좋겠어요.:label이 컴포넌트를 사용하면 다음과 같이 됩니다. div.col-4 OrganiastionSelect( :rules="[val => !!val ..

itsource 2022.08.21

루트 메타데이터 키가 true로 설정된 경우 특정 경로에서 구성 요소를 모달로 렌더링합니다.

루트 메타데이터 키가 true로 설정된 경우 특정 경로에서 구성 요소를 모달로 렌더링합니다. vue-router를 사용하고 있으며 다음과 같은 기능을 생성하려고 합니다. 라우터 루트로 컴포넌트를 모달로 렌더링할지를 지정할 수 있도록 하고 싶습니다.모달로 렌더링된 경우 아래의 모든 컴포넌트(modal-mask 아래)를 참조해 주세요.기본적인 모달 구조를 가진 모달 래퍼 컴포넌트를 만들었습니다.slot렌더링할 컴포넌트가 그 모달바디 안에 들어가도록 합니다.slot하지만 그걸 어떻게 달성할 수 있을까.한다Vue-Router그 기능을 선택할 수 있습니다. 라우터 루트: { path: '/customers/:clientId', component: customerView meta: { auth: true, }, }..

itsource 2022.08.21

VueJ를 사용하여 Axios 데이터 응답에서 이미지 URL을 다운로드하려면 어떻게 해야 합니까?s

VueJ를 사용하여 Axios 데이터 응답에서 이미지 URL을 다운로드하려면 어떻게 해야 합니까?s 프런트 엔드의 데이터를 Vue로 루프한 후 이미지를 표시할 수 있지만 다운로드 방법을 모르겠습니다.이미지 또는 다른 버튼을 클릭하여 이미지를 다운로드 할 수 있도록 하고 싶습니다. 를 사용할 수 있습니다.download의 특성요소: 단, IE 및 Safari는 지원하지 않습니다.download https://caniuse.com/ #http=syslog언급URL : https://stackoverflow.com/questions/49746042/how-do-i-download-an-image-url-from-axios-data-response-using-vuejs

itsource 2022.08.21

v-select 값을 동적으로 설정하는 방법

v-select 값을 동적으로 설정하는 방법 마이뷰티v-select요소는 다음과 같습니다. 인data다음 항목을 참조할 수 있습니다. data () { return { languages: [ { shortCode: 'en', text: 'English' }, { shortCode: 'pl', text: 'Polski' }, { shortCode: 'es', text: 'Español' }, { shortCode: 'pt', text: 'Portugues' } ], fetchedLocale: '', setLocale: null } }, (...) 약간의 처리 후fetchedLocale일부의 가치를 얻다text"Portugues"와 같이 위 배열의 속성을 표시합니다. 질문: 업데이트 방법v-select그렇게..

itsource 2022.08.21

vue-router를 사용한 Google 받은 문서 스타일 탐색

vue-router를 사용한 Google 받은 문서 스타일 탐색 나는 앱을 만들고 있다.vue-router(현재는 사용되지 않는) Google Inbox와 유사한 UI를 얻으려고 합니다.Techcrunch 홈페이지가 더 나을 수도 있어요 아이템 리스트가 있다 이러한 항목 중 하나를 클릭하면 "제자리"에 추가 세부 정보가 표시됩니다. URL도 확장 항목을 반영하도록 업데이트됩니다. "뒤로"를 클릭하면 항목이 목록으로 다시 축소됩니다. URL 에 직접 액세스 하는 경우는, 페이지에 전개된 항목이 표시됩니다.또한 (옵션으로) 아래에 더 많은 리스트 항목이 표시될 수 있습니다. 문제는 이걸 어떻게 만들어야 할지 모르겠어요.아이를 어디에 배치해야 할지 모르겠어요.확장하기 위해 방금 클릭한 항목에 따라 위치가 항상..

itsource 2022.08.21

v-if를 사용하여 하위 div를 표시할 때 상위 요소의 높이 점프를 방지하는 방법

v-if를 사용하여 하위 div를 표시할 때 상위 요소의 높이 점프를 방지하는 방법 나는 부모 div와 자녀 div가 있다.하위 div는 v-if를 통해 표시됩니다.자녀 요소에 전환을 추가할 수 있지만, 전환이 부모의 키를 넘으면 갑자기 변경되어 보기에도 좋지 않습니다. jQuery의 slideToggle() 기능 같은 것을 원합니다. 여기 html이 있습니다.페이드 이펙트를 사용하고 있습니다.opacity: some content hello 이행 css는 다음과 같습니다. .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } .my-div { background..

itsource 2022.08.19

Vue에서 클래스를 조건부로 추가하려면 어떻게 해야 합니까?

Vue에서 클래스를 조건부로 추가하려면 어떻게 해야 합니까? Vue로 변환하는 프로젝트가 있는데 데이터베이스에서 반환되어 Vue로 렌더링되는 항목에 따라 어떤 요소에 클래스를 조건부로 추가할 수 있는지 궁금했습니다.Vue를 사용하지 않을 때 사용한 어플리케이션 코드는 다음과 같습니다. $(document).ready(function() { $('.task_element').each(function(index, element) { if ($(element).find(".task_priority").text().trim() === "high") { $(element).addClass('high'); } else if ($(element).find(".task_priority").text().trim() ==..

itsource 2022.08.19

Laravel Vue Non SPA - vue js 컴포넌트의 모든 페이지의 파일을 분할하려면 어떻게 해야 합니까?

Laravel Vue Non SPA - vue js 컴포넌트의 모든 페이지의 파일을 분할하려면 어떻게 해야 합니까? 제 어플리케이션은 SPA가 아닌 라라벨 vue를 사용하고 있기 때문에 페이지를 분리하기 위해 라라벨 블레이드를 사용하고 있습니다.모든 페이지가 app.js를 Import하고 있습니다.My App.js는 웹 팩에 의해 컴파일되고 모든 vue 컴포넌트는 해당 파일에 컴파일됩니다.따라서 문제는 app.js가 MB 사이즈를 취득하면 모든 페이지가 해당 파일을 로드하는 속도가 느려진다는 것입니다.웹 팩을 사용하여 vuej의 코드를 분할하거나 모든 페이지의 파일을 분리하는 방법입니까? 이것은 내 웹 어플리케이션의 webpack.dll입니다. const mix = require('laravel-mix'..

itsource 2022.08.19
반응형