반응형

vuejs2 121

django rest 프레임워크 + vue SPA 인증 처리

django rest 프레임워크 + vue SPA 인증 처리 인증된 사용자(사용자 프로파일의 데이터를 취득하는 사용자 글로벌오브젝트 등)에게 제공하는 기능과 동일한 기능을 1페이지 애플리케이션(물론 Vue Router 사용)에 제공하려면 어떻게 해야 합니다. 내 요점은 사용자가 사용자 이름과 비밀번호를 입력한 후 로그인을 유지하기 위해 어떻게 django 미들웨어와 동등한 vue용 미들웨어를 만들 수 있는지 모르겠다는 것입니다. django rest 프레임워크 jwt를 사용하여 엔드포인트를 구현할 수 있다는 것을 알고 있습니다./api-token-auth/api에서 정보를 취득할 수 있도록 필요한 토큰을 취득(localStorge에 저장하여 axios 헤더에 저장 가능)하지만 토큰 이외의 사용자 세션은 ..

source 2022.08.25

125% 확장 시 Windows OS Chrome 브라우저에서 body Scroll End 이벤트가 트리거되지 않음 [ag-grid-vue]

125% 확장 시 Windows OS Chrome 브라우저에서 body Scroll End 이벤트가 트리거되지 않음 [ag-grid-vue] Windows 8,10,11 의 「vue」를 재현하는 환경: 「2.5.16」 「ag-grid」: 「18.1.2」 「ag-grid-vue」: 「26.2.0」 브라우저:크롬 96.0.4 + 재현 가능한 시나리오 제공 윈도 디스플레이 해상도를 125% 또는 150%로 설정합니다. 크롬을 사용하여 앱을 엽니다. https://codesandbox.io/s/ag-grid-vue-example-forked-gy47e?file=/src/App.vue 이제 그리드의 맨 아래로 스크롤해 보십시오.bodyScrollEnd스크롤이 끝에 도달했을 때 트리거되지 않음 CodeSandBox..

source 2022.08.25

Vue 슬롯의 렌더링된 HTML 콘텐츠를 변수로 가져옵니다.

Vue 슬롯의 렌더링된 HTML 콘텐츠를 변수로 가져옵니다. 난 네가 이런 걸 할 수 있다는 걸 알아. Hi there Hi heloo Hi there Hi there // JS Vue.component('get-slot-contents', { data: function () { return { html : false } }, template: ` **** **** `, mounted(){ console.log(this.$slots.default); } }); 이것은, 다음의 로그를 기록합니다. [fo, fo, fo, fo, fo, fo, fo] 각 각각fo같은 것을 포함하는:다음을 포함합니다. {tag: undefined, data: undefined, children: undefined, text: ..

source 2022.08.25

vue-cli 3에서 프로젝트 템플릿에 Vuetify 추가: App.vue에 스크립트 태그를 추가하면 앱이 중단됩니까?

vue-cli 3에서 프로젝트 템플릿에 Vuetify 추가: App.vue에 스크립트 태그를 추가하면 앱이 중단됩니까? 나는 Vue Noob이고 기본적인 것을 이해해야 한다.vue-cli 3에는 "App.vue"가 있고 루트 컴포넌트도 있고그리고.다른 컴포넌트와 마찬가지로 태그가 부착되어 있습니다.그러나 vue-cli 3을 사용하여 Vue 프로젝트를 시작한 후vue add vuetify, App.vue에는 이러한 태그가 포함되어 있지 않습니다.그 태그를 추가하면 앱이 파손됩니다!"views"라는 새 폴더도 있어요?누가 이것 좀 설명해 줄래요?죄송하지만 Vuetify의 페이지에서 아무것도 찾을 수 없습니다. 갱신: 같은 방법으로 다른 프로젝트를 세팅하려고 했을 때 이상한 일이 일어났습니다.모든 것이 익숙한..

source 2022.08.25

사용자 지정 Vue 구성 요소에 vanilla .js를 추가하는 방법

사용자 지정 Vue 구성 요소에 vanilla .js를 추가하는 방법 커스텀 vue 컴포넌트에 간단한 날짜 선택기를 추가하려고 합니다.웹 팩을 사용하지 않기 때문에 기성품은 피하고 싶다..vue컴포넌트와 간단한 javascript를 vue에 추가하는 방법을 알고 있습니다. 저는 이 공식 vue 튜토리얼을 따르고 있습니다. 나도 이 코드펜을 봤지만 달력 보기를 할 수가 없어. 제 jsfiddle입니다. HTML: app.filename: Vue.component('date-picker', { extends: Flatpickr, mounted () { this.Flatpickr(date-elem, {})} }) .vue 파일이나 웹 팩 등을 사용하지 않고 Vue 컴포넌트에 vanilla js를 쉽게 통합할 ..

source 2022.08.25

올바른 사용: vuetify 대화 상자를 사용한 외부

올바른 사용: vuetify 대화 상자를 사용한 외부 필요한 경우 달력 선택기를 팝업하는 데 사용하는 v-dialog가 있습니다.이를 표시하기 위해 v-modle로 값을 바인딩합니다.click:outside 이벤트를 사용하여 외부에서 클릭하면 닫히도록 되어 있는 기능을 트리거합니다(외부를 클릭하면 대화상자가 해제되지만 값은 'true'로 유지되므로 두 번 이상 표시할 수 없습니다).내가 뭔가 잘못하고 있는 게 틀림없어. 대화창은 다음과 같습니다. fermer 또, 다음과 같이 간단하게 호출할 수 있습니다. inflate date picker 그래서 문제없이 부풀릴 수 있어요.closeDialog()에는 들어갈 수 없지만 (디버깅과 로그로 확인)그럼 무슨 일이 있었길래 함수에 들어갈 수 없는 거죠?일반적인..

source 2022.08.25

vue: 컴포넌트에 전달된 오브젝트를 무효로 만들려면 어떻게 해야 합니까?

vue: 컴포넌트에 전달된 오브젝트를 무효로 만들려면 어떻게 해야 합니까? 코드펜 데모 내 컴포넌트에는 다음 컴포넌트의location로서 반대하다.props제가 넘긴 논쟁은locations[index]에서 선택한 항목입니다.locations어레이를 설정합니다. 단, 컴포넌트는 다음 경우에 반응할 수 없습니다.index바꾸다.데모에서 볼 수 있듯이 버튼을 클릭하면 JSON이 변경되지만 컴포넌트는 갱신할 수 없습니다. 컴포넌트를 반응시키는 가장 좋은 방법은 무엇입니까? 당신의.location컴포넌트에 입력되어 있다.province그리고.city의 데이터 속성mounted후크만언제?location프로포트의 변경,mounted훅이 다시 호출되지 않기 때문에 오래된 데이터가 남습니다. 대신 계산된 속성을 사용합니..

source 2022.08.25

Vue warn: 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?

Vue warn: 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까? 저는 신입생입니다. 커스텀 컴포넌트를 사용할 때 다음과 같은 오류가 발생합니다. Vue warn: 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까? 그ModalBase컴포넌트에 사용되는 컴포넌트NoticeModal.vue그리고.NoticeModal에서 사용되는 콘텐트productInfo.vue. 내가 제대로 수입했다고 확신해.NoticeModal에productInfo.vueImport도 합니다.ModalBase.vue에NoticeModal.vue, 및 모든 등록. 하지만 경고는 하나뿐이에요Unknown custom element: 여기 있습니다ModalBase.vue: This is base 여..

source 2022.08.24

vue-model-decorator의 @model decorator는 vue-model을 생성합니다.변이 방지

vue-model-decorator의 @model decorator는 vue-model을 생성합니다.변이 방지 나는 이 lib에 타이프 스크립트를 사용한다.그리고 다음 코드가 파일에 있습니다.HomePage.vue: Write something x: 컴파일 후 브라우저에서 실행하고 vue warrning 후 chrome 콘솔에 표시되는 입력 상자에 다음과 같이 입력합니다. [Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "someName" 이 문제를 어떻게 해결할지 아세요?TL: DR 저는 Vue(React에서 온)에 처음이지만, 위의 답변은 틀리지 않..

source 2022.08.24

Vue JS에서 부트스트랩 모달 숨기기 이벤트 처리

Vue JS에서 부트스트랩 모달 숨기기 이벤트 처리 Vue (2)에서 Bootstrap (3) 모달 숨김 이벤트를 처리하는 적절한 방법이 있습니까? JQuery 방법으로 이 이벤트를 Vue에서 캡처하는 방법을 찾을 수 없습니다. $('#myModal').on('hidden.bs.modal', function () { // do something… }) 다음과 같은 것을 추가한다.v-on:hide.bs.modal="alert('hide')효과가 없는 것 같습니다.부트스트랩은 JQuery를 사용하여 커스텀이벤트를 트리거합니다.hidden.bs.modal그래서 Vue에게 쉽게 잡히지 않는다(후드 아래에서 원주민 이벤트를 사용한다고 생각한다). Bootstrap의 네이티브모달을 사용하려면 페이지에 JQuery가..

source 2022.08.24
반응형