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"를 추가하니 가운데 정렬이 되었다.

• format_list_bulleted Front-End/Vue.js
• · 2023. 7. 24.
• textsms

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..

• format_list_bulleted Front-End/Vue.js
• · 2023. 6. 20.
• textsms

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

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

• format_list_bulleted Front-End/Vue.js
• · 2023. 6. 15.
• textsms

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) } },

• format_list_bulleted Front-End/Vue.js
• · 2023. 5. 31.
• textsms

일렉트론과 리액트 환경에서 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..

• format_list_bulleted Front-End/React
• · 2022. 12. 8.
• textsms

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

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

• format_list_bulleted Front-End/Vue.js
• · 2021. 11. 4.
• textsms

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..

• format_list_bulleted Front-End/Vue.js
• · 2021. 8. 1.
• textsms

스프링 부트 + 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..

• format_list_bulleted Front-End/Vue.js
• · 2021. 7. 10.
• textsms