c10106

Nuxt.js와 함께 Vuex 사용 - 올바른 방법 나는 Nuxt.js 프로젝트에 Vuex를 추가하려고 한다.나는 사용자 정의 리그 박스를 만들었고 모든 페이지를 통해 코드를 기본 레이아웃 페이지에 쓰기 위해 공유했다. 페이지에서 ligth 박스를 숨기거나 표시하려면 상태 값을 변경해야 한다.다음은 "스토어" 폴더에 있는 모든 모듈: // state.js export const state = () => ({ lightbox: false, }); // getters.js export const getters = { getLightbox(state) { return state.lightbox }, } // actions.js export const actions = { showLightbox({commit}..

부에루터 푸시 정의되지 않음 나는 UI를 디자인하기 위해 Quasar 프레임워크를 사용했다.기능을 사용하여 로그아웃하고 다른 경로로 푸시하는 경우vue-router나는 다음과 같은 오류를 얻었다. TypeError: Cannot read property 'push' of undefined vuex 작업 방법을 사용하여 로그아웃 및 교체: export const handleAuthStateChanged = ({ commit }, payload) => { firebaseAuth.onAuthStateChanged(function(user) { if (user) { // user is logged in let userId = firebaseAuth.currentUser.uid; firebaseDB.ref("us..

왜 약속인가.드디어 엣지에서 일하지 않는 내 Vue 프로젝트에서? 나는 엣지에서 일하기 위해 폴리필름을 구하는데 엄청난 어려움을 겪고 있다.나는 여러 가지 시도들이 모두 통하지 않고 서류를 따르려고 노력했다.약속인 것 같다.마지막으로, 그것은 작동하지 않는다.vuex 모듈에서 이러한 현상이 발생하므로 vue.config의 transpileDependency에 vuex를 추가하려고 했지만 운이 따르지 않았다. 내 babel.config.js: module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; 나의 main.js에는 다음과 같은 두 가지 수입품이 맨 위에 있다. import 'core-js/..

Vuejs: 구성 요소 간 공유 상태 나는 Vuejs에 있는 구성요소들 간의 공유 상태를 구현하기 위한 최선의 방법을 알고 싶다. 상상 상황 A: 당신은 모달(모달)을 보여주는 웹 앱을 가지고 있다.모달의 부울 상태가 있음show. 이 상태는 모달 OK-버튼을 클릭했을 때 변경되어야 하지만 또한 배경의 어떤 부분을 클릭했을 때 변경되어야 하며, 심지어 어떤 서버 푸시 상태 변경에서도 변경되어야 한다.따라서 모달은 부모 앱처럼 상태를 변경할 수 있어야 한다. 상황 B: 공통 데이터를 공유하는 여러 구성 요소 내부의 입력 필드를 보여주는 웹 앱이 있음value. 사용자가 변경되는 경우value한 구성 요소의 필드를 통해 다른 구성 요소에서도 업데이트해야 한다.다시 말하지만 둘 다 서버 푸시 이벤트에서 업데이..

Vue.js 템플릿에서 임시 변수를 정의하는 방법 현재 템플릿: {{rowLenMap[orderList[n - 1]]}} 문제는 내가 글을 써야 한다는 것이다.rowLenMap[orderList[n - 1]]vue.js 엔진도 여러 번 계산할까봐 걱정이다. 내가 원하는 건 이런 거야 {{rowLen}} 이런 걸 쓰면 어설프게 풀릴 수 있기 때문에 기술적으로 구현하는 것은 어렵지 않다고 본다.v-for="rowLen in [rowLenMap[orderList[n - 1]]]"그래서 어떤 간결하고 공식적인 해결책은 없을까?나는 그것을 달성하기 위한 아주 간단한 (거의 마법적인) 방법을 찾았다. 단지 당신이 여러 번 사용하고 싶은 값을 가진 인라인(로컬) 변수를 정의하기만 하면 된다. {{ user.name ..

Vuex + Jest에서 스토어에 전화를 거는 게이터를 어떻게 유닛 테스트하는가? 나는 내 vuex 상점에서 다음과 같은 아주 간단한 getter를 테스트하려고 한다.그것은 단순히 두 개의 줄을 연결시키는 것이다. const getters = { adressToGet: state => { return state.baseAdress + store.getters.queryToGet } } 주의 부분을 조롱하는 것은 쉽지만 나는 가게를 조롱하는 좋은 방법을 찾을 수 없다. 구성 요소에 있는 경우 구성 요소를mount또는shallow모의 가게로 배정할 수도 있지만 그렇지 않아이건 Vuex 스토어에서 온 겁니다. 이건 내 시험 코드야. import Search from '@/store/modules/search'..

파일을 base64로 변환하고 Vuejs에서 v-model 바인딩 추가 나는 파일 입력 필드가 있는 구성요소를 만들고 있고, 기능을 통해 렌더링되고 있다.VueJs: export default { name: 'nits-file-input', props: { label: String, }, render (createElement) { return createElement('div', { class: 'form-group m-form__group'}, [ createElement('label', this.label), createElement('div'), createElement('div', { class: 'custom-file'},[ createElement('input', { class: 'custo..

Vue.js 계산된 속성은 이벤트를 통과할 때 반응성을 잃는다. 나는 a를 가지고 있다.Modal모달이 표시되어야 할 때마다 이벤트를 통해 콘텐츠를 전달하는 내 기본 앱의 구성 요소.모달 콘텐츠는 항상 "선택" 또는 "제거"와 같이 각 항목과 관련된 액션을 포함하는 목록이다. Vue.component('modal', { data() { return { shown: false, items: [], callback: ()=>{} } }, mounted() { EventBus.$on('showModal', this.show); }, template: ` {{ item }} Remove `, methods: { show(items, callback) { this.shown = true; this.items = ..

Vue 라이브러리 선택을 사용하여 vue 선택 필드에 여러 레이블을 표시하는 방법 나는 아래와 같이 vue Select 라이브러리에서 vue 선택 구성 요소를 html 형식으로 사용하고 있는데, 라벨에 세 가지 값을 표시하고 싶은데 어떻게 해야 할지 모르겠어. 설명서에서 해결책을 찾을 수 없었어. 아래와 같이 라벨에 3개의 값을 표시하고자 한다. HTML: JS: Vue.component('v-select', VueSelect.VueSelect); var app = new Vue({ el: '#app', data: { formfieldsdata: { items: [], }, item: { selected_item: 0, }, } }); vue 선택 라이브러리 설명서 참조: https://vue-selec..

vue2-daterange-picker에서 "Clear" 버튼을 구현하는 방법? vue2-daterange-picker 예시 보기 https://innologica.github.io/vue2-daterange-picker/#1906 어떻게 구현되는지 궁금하다.Clear단추? 그러한 버튼과 빈 값을 기본값으로 만들어야 한다(1970년 1월 1일이 아니다).이 일은 내게 효과가 있었다. 단추가 개체를 업데이트하거나 이 경우 기본값으로 '재설정'해야 한다. 단추 Clear 방법들 methods:{ clearDate() { this.dateRange.startDate = null; this.dateRange.endDate = null; }, } 나는 이 모든 것에 익숙하지 않다. 그리고 나는 내 답변이 질문이 ..