Front-End

vue 부트스트랩 페이지네이션 가운데 정렬

기존 코드 https://bootstrap-vue.org/docs/components/pagination BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 분명 docs에는 align="center" 하면 가운데 정렬이 되는 걸로 나온다. b-row, b-col 로 바꾸고 cetner 과 cols="auto"를 추가하니 가운데 정렬이 되었다.

vue3 Composition API Setup()에서 async await 사용하기

오늘의 2시간 삽질 const users = ref([]); (async () => { const res = await axios.get("url 주소 "); users.value = res.data; console.log(res); })() return { users, } https://stackoverflow.com/questions/64117116/how-can-i-use-async-await-in-the-vue-3-0-setup-function-using-typescript How can I use async/await in the Vue 3.0 setup() function using Typescript (This question has been answered for JavaScript, se..

v-if v-else 에서 $refs 값이 나오지 않을 때 삽질중이라면

오늘의 삽질! status 가 true이냐 false 이냐 에 따라 span 태그가 출력되거나 Textinput이 출력됩니다. v-if, v-else 는 조건에 맞는 부분만 렌더링을 하기 때문에 어떤 버튼의 의해 해당 조건이 바뀌어 화면에 보이는 것이 바뀐다면 $refs에서 값이 없다고 나옵니다. $this.$refs.groupName //undefined v-show 를 사용한다면 해당 부분 렌더링을 한 후 display: none으로 보이지 않게만 만들기에 $refs에는 값이 나옵니다.

vue3 setup() onSubmit emit 사용하기

하위 컴포넌트 export default { emits: ['add'], setup(props, context) { const { emit } = context } const onSubmit = handleSubmit( ( { data } // Form values ) => { // Form submission logic emit('add', data) } ) return { onSubmit } } 상위 컴포넌트 .... 생략 methods: { add(data) console.log(data) } },

일렉트론과 리액트 환경에서 winston-daily-rotate-file 라이브러리 사용시 주의할 점

winston-daily-rotate-file 라이브러리 https://www.npmjs.com/package/winston-daily-rotate-file/v/4.7.1?activeTab=readme winston-daily-rotate-file A transport for winston which logs to a rotating file each day.. Latest version: 4.7.1, last published: 6 months ago. Start using winston-daily-rotate-file in your project by running `npm i winston-daily-rotate-file`. There are 1502 other projects in the n ww..

Vue.js 버튼에 클릭 이벤트 함수 여러개 달기 - 주의사항?

열기 이런 버튼이 하나 있습니다. 보통 버튼 하나에 클릭 이벤트를 달 경우 open()이라는 함수가 있으면 이렇게 사용합니다. 열기닫기 두 개의 이벤트를 사용할 경우 두 개의 함수를 이벤트로 걸어주면 됩니다. 근데 이렇게 하면 동작하지 않습니다... 열기닫기 두 개 부터는 ()를 생략하면 안됩니다...

Vue.js watch 사용 할 때 TypeError: Cannot read property 'pageClick' of undefined 에러

이 페이지네이션 에 page 부분에 클릭할 때 이벤트를 발생시켜 사용자 정보 API의 데이터를 페이지에 맡게 가져올 수 있도록 변경하려고 합니다. 처음 1 페이지의 데이터 입니다. 에서 제공하는 @page-click 가 있습니다. 블록 버튼을 클릭하면 page가 해당하는 page로 바뀌게 됩니다. 이 페이지 이벤트를 발생시켜 해당 메소드를 실행하도록 하겠습니다. 이렇게 2번을 클릭하면 page가 2로 변합니다. 그럼 데이터가 /users?page=2가 들어가 6~10의 id를 가진 데이터를 가져오게 되겠죠? 근데 데이터를 변하지 않습니다. 심지어... 다른 버튼을 클릭하면 이전에 요청한 데이터가 불러와집니다... 이유는 page의 현재 데이터를 가지고 axios 요청을 보내게 됩니다... 우리는 바뀐 p..

스프링 부트 + Vue.js 연동 같은 프로젝트 일 때 router 설정

스프링 부트 프로젝트에 vue.config.js 로 npm build 하여 /resources/static/ 경로에 index.html로 만들었을 경우 import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import Login from "@/components/Login"; const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: Login } ] const router = createRouter({ history: createWebHistory(pro..