최근 개발하고 있는 코드를 집에서 예제로 해서 한번 만들어봤습니다.컴포넌트끼리의 데이터 주고 받는 이벤트에 대해서 이해하는것이 중요합니다.그래서 지금 만들었던 코드를 가지고 windsurf 의 SWE-1 무료버전에게 물어봤습니다. 1. 속성(Props) 전달::show-dialog="currentConfig.showConfigDialog":show-dialog: 자식 컴포넌트에 show-dialog prop을 전달currentConfig.showConfigDialog: 부모 컴포넌트의 반응형 데이터를 바인딩:component="availableComponents[currentConfig.componentName]":component: 사용 가능한 컴포넌트 목록에서 현재 선택된 컴포넌트를 전달:form-d..

팝업 화면에서 확인을 클릭하고 나면 원하는 다른 페이지로 이동하게끔 하는 기능이 필요했다. 1. 먼저 팝업 화면에서 click 이벤트를 줬다. mdi-check 확인 이 코드에서 보듯이 클릭 이벤트에 'proceedRouterNavigation' 이 메소드를 호출하도록 했다. 2. proceedRouterNavigation 함수const proceedRouterNavigation = () => { showRouterConfirmDialog.value = false; // CodePage로 라우터 이동 router.push('/dashboard/code');}; 라우터 이동은 push 를 이용한다.push 를 통해 정의된 라우터를 입력해주면 원하는 페이지로 이동하게 된다.

만들고자 하는 화면은 아래와 같은 화면입니다. 원래 아래와 같은 코드로 구성된 것을 compenent 를 만들어서 사용해 봤습니다.// 처음 만들었을 때 코드 {{ getInitial(client.name) }} {{ client.name }} {{ client.email }} ..

현재 프로젝트에서 사용중인 방법 vue Vuex 에서 제공하는 createNamespacedHelpers 를 사용 import { createNamespacedHelpers } from ‘vuex’; const { mapState, mapActions } = createNamespacedHelpers(‘admin/abc0101’); export default { methods: { ...mapActions([ ‘selectCodeList’, ‘selectProjectList’, ]), this.getProjectList(params).then( () => {}); }, computed: { ...mapState([ ‘dsCodeList’, ‘dsProjectList’ ]), }, } js 모듈별로 js파..