반응형

vuex 217

왜 모바일에서는 키다운이 작동하지 않는가?버전 2

왜 모바일에서는 키다운이 작동하지 않는가?버전 2 저는 이렇게 시도합니다. ... ... 코드가 실행되어 닷(.)을 입력해도 여전히 할 수 있습니다. Dekstop에서는, 무효가 되어 있었습니다.단, 모바일에서는 이 기능을 무효로 하지 않습니다. 점을 비활성화합니다.사용자가 닷을 입력할 수 없습니다. 어떻게 해야 하죠? 메모 dekstop에서는 코드가 동작합니다.하지만 모바일에서는 코드가 작동하지 않습니다.모바일에서는 닷(.)이 비활성화되지 않습니다.문제는 'keydown' 또는 'keyup'이 있는 키코드가 브라우저 간에 일관성이 없는 것처럼 보인다는 것입니다.OS에도 영향이 있을 수 있습니다.다양한 브라우저 및 모바일 디바이스에서 테스트 할 수 있습니다. 보다 일관성을 찾을 수 있을 것 같습니다.v-..

IT이야기 2022.06.19

Vue/Vuex를 사용하여 동적 개체 값을 설정하는 방법

Vue/Vuex를 사용하여 동적 개체 값을 설정하는 방법 Vue/Vuex를 사용하여 내 상태의 개체에서 키: 값 쌍을 동적으로 만들고 입력하는 방법을 이해하는 데 어려움을 겪고 있습니다. 예를 들어 다음과 같습니다.dataObject: {}(상태) 및 새로운 키:값 쌍을 작성하는 변환: setdataObjectProps: (state, payload) => { for (let [key, value] of Object.entries( state.dataObject )) { if (key == payload[0]) { dataObject.total_operation_time = payload[1]; dataObject.machine_name = payload[2]; } } }, 이 솔루션은 작동하지만 키: ..

IT이야기 2022.06.19

응답성 높은 Vuetify 앱바 구축 방법

응답성 높은 Vuetify 앱바 구축 방법 Vue.js 프로젝트에서 응답성 높은 Vuetify 앱 바를 설정하려고 합니다.내비게이션 링크는 모바일 화면에서 볼 때 3점 드롭다운 메뉴에 렌더링됩니다. Toolbar Mobile Menu Create Post All Posts mdi-dots-vertical Create Post All Posts 문제는 3점 버튼이 전체 화면과 모바일 모두에서 렌더링된다는 것입니다.물론 그 버튼은 모바일에서만 볼 수 있도록 하고 싶다.이 문제를 해결하기 위해, 저는 이 버튼의 내부를v-toolbar-items태그도 동작하지 않았습니다.모바일 뷰에만 3점 버튼이 표시되도록 이 앱 바를 구성하는 방법에 대한 권장 사항이 있습니까?감사합니다!나는 보통 작은 도우미 기능을 만든다...

IT이야기 2022.06.19

페이지를 로드할 때 Nuxt JS Vuex 설정 데이터가 실시간으로 반영되지 않음

페이지를 로드할 때 Nuxt JS Vuex 설정 데이터가 실시간으로 반영되지 않음 Nuxt JS 2.9 어플리케이션에서는 Vuex를 사용하여 데이터를 저장하고 레이아웃을 검색합니다.Vuex 스토어에 페이지 단위로 데이터를 설정하고 있습니다.데이터는 정상적으로 동작하고 있습니다만, 새로운 페이지의 페이지를 갱신하지 않으면 오래된 데이터가 표시됩니다. 예를 들어, 홈페이지에서 다음과 같이 설정합니다. mounted () { this.$store.commit('toolbar/setToolbar', { name: 'Homepage' }) } [설정(Settings)]페이지에서 다음을 수행합니다. mounted () { this.$store.commit('toolbar/setToolbar', { name: 'Se..

IT이야기 2022.06.17

구성 요소 페이지 Vue로 푸시할 때 재귀 발생

구성 요소 페이지 Vue로 푸시할 때 재귀 발생 레이아웃에서 Post 사이트로 푸시하려고 하면 "InternalError: too much recursion" 오류가 발생합니다. 레이아웃 코드vue: watch(searchText, (newValue, oldValue) => { log('Current State of SearchText', newValue); if (newValue !== null) { if (newValue.value !== undefined) { let id = newValue.value; // push to post with id router.push(`/post/${id}`); } else { // todo: start search } } }); QSelect 모델 값이 변경될 때..

IT이야기 2022.06.17

Vuejs SPA의 프론트 엔드를 보호하려면 어떻게 해야 합니까?

Vuejs SPA의 프론트 엔드를 보호하려면 어떻게 해야 합니까? Vuejs를 사용하여 SPA를 구축하고 Laravel API를 사용하고 있으며 사용자는 여러 역할을 수행할 수 있습니다. 토큰 및 사용자 역할을 저장하는 가장 좋은 방법은 무엇입니까?또, 유저가 그 역할이 무엇인지 알 수 없게 할 수 있습니까? 제가 아직 알고 있는 솔루션은 쿠키와 로컬 스토리지에 저장하는 것입니다.단, 역할의 LocalStorage 키를 알고 있는 사용자가 일반 사용자처럼 변경하여 관리 대시보드(프런트 엔드만)와 관리자가 앱에서 볼 수 있는 내용을 볼 수 있는 경우. 어떻게 하면 예방할 수 있을까요?또 SPA를 보호하는 가장 좋은 방법은 무엇입니까? 잘 부탁드립니다.SPA 프런트엔드는 '시큐어'로 간주할 수 없습니다.브라..

IT이야기 2022.06.16

Nuxt.js의 스테이트와 Getter에 대해서: Getters가 동작하지 않는다

Nuxt.js의 스테이트와 Getter에 대해서: Getters가 동작하지 않는다 Vue와 Nuxt는 처음이고, 이 프레임워크로 유니버설 모드로 첫 번째 웹사이트를 구축하고 있습니다. 공식 문서로는 원하는 것을 달성할 수 없기 때문에, Nuxt에서의 점포 운영이 조금 혼란스럽습니다. 스토어 폴더에는 현재 "products.js"라는 파일이 1개만 저장되어 있으며, 그 안에 다음과 같이 상태를 내보냅니다. export const state = () => ({ mistica: { id: 1, name: 'mistica' } }) (객체는 알기 쉽게 설명하기 위해 간략화되었습니다.) 같은 파일에서 간단한 getter를 셋업했습니다.예를 들어 다음과 같습니다. export const getters = () =>..

IT이야기 2022.06.15

탭을 닫은 후 Vuex 지속 상태가 제거되지 않음

탭을 닫은 후 Vuex 지속 상태가 제거되지 않음 브라우저의 데이터 상태를 유지하기 위해 vuex-http://https://github.com/robinvdvleuten/vuex-persistedstate 를 사용합니다. 앱에서 로그아웃하면 패키지는 인증된 사용자에 대한 모든 상태 정보를 지웁니다.그러나 탭을 닫은 후 중요한 데이터가 제거되지 않고 jwt 토큰이 만료되어 로컬 스토리지에서 여전히 연결할 수 있다는 것을 깨달았습니다. 이 문제에 대처하기 위한 권장 사항이 있습니까?현재 탭의 수명 기간 동안만 데이터를 저장하려면 데이터를sessionStorage내부가 아니라localStorage.vuex-persistedstate쉽게 할 수 있습니다. 이 플러그인의 인스턴스를 생성할 때 옵션 개체를 지정할..

IT이야기 2022.06.15

Vuex가 mapState를 사용하여 매핑된 계산 변수를 업데이트하지 않음

Vuex가 mapState를 사용하여 매핑된 계산 변수를 업데이트하지 않음 제가 뭘 잘못하고 있는지 알아내기 위해 몇 가지 질문을 했습니다.모든 것이 올바르게 설정되어 있는 것 같습니다. 목표 COMPONT A의 값을 기반으로 콘텐츠 숨기기/표시 변경v-show종속 컴포넌트에 있습니다. 문제 TextField 컴포넌트 내부에는 변환이 트리거되는 입력이 있습니다.vuex store. 의존 컴포넌트에는computed에서 변경을 리슨하는 값vuex store. TextField Component에 입력할 때 Vue.js 확장자를 사용하여 돌연변이가 예상대로 트리거되는지 확인할 수 있습니다. 그러나 페이지에는 변화가 없습니다. 컴포넌트 A 돌연변이 UPDATE_USER_INPUT (state, payload) ..

IT이야기 2022.06.15

Vuex 동적 확인란 바인딩

Vuex 동적 확인란 바인딩 Vuex를 사용하여 확인란을 바인딩하는 데 문제가 있습니다.getter와 setter가 있는 변수와 함께 v-model을 사용하여 값을 설정 또는 가져오는 확인란에서 잘못된 데이터를 저장하여 문제의 원인을 알 수 없습니다.체크박스는 스토어 속성에 바인드되며 이 속성은 체크박스의 ID 배열을 포함해야 하는데, 체크박스를 여러 번 클릭하면 스토어 값이 다시 작성되거나 삭제됩니다.왜 이런 일이 일어나는지 이해할 수 있는 사람 있나요?jsFiddle에 링크합니다. 코드 const store = new Vuex.Store({ state: { checkboxes: {}, checked: {} }, mutations: { setCheckboxes(state, dataObj){ consol..

IT이야기 2022.06.15
반응형