VUE

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

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

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 프로젝트 Jenkins로 nginx에 배포해보기

vue cli 를 통해 vue 프로젝트를 만들었습니다. 일반적으로 vue.config.js 를 따로 설정해 주지 않는 이상 npm run build를 실행하게 되면 해당 디렉토리에 dist라는 폴더가 만들어집니다. build의 결과물인 dist라는 폴더를 nginx에 올려야 합니다. 1. vue 프로젝트를 git 저장소에 push를 합니다. 이렇게 push가 되었습니다. 2. webhook을 통해 젠킨스가 빌드되기를 바랍니다. 해당 저장소의 Settings 를 눌러줍니다. Webhooks 를 눌러줍니다. 저는 이미 만들어놨기에 하나가 만들어져 있습니다. 여기서 Add webhook을 눌러줍니다. URL은 젠킨스의 접속 주소입니다. 저는 ec2를 사용하기 때문에 ec2의 주소 + /github-webhoo..

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

Vue.js axios 전역 설정과 baseURL 설정

vue cli 를 통한 vue3를 설치했습니다. router와 vuex 등을 체크하고 설치했습니다. main.js 기본구조 입니다. import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app') npm install axios axios를 설치해줍니다. import axios from "axios"; axios를 import 해줍니다. axios.defaults.baseURL = 'http://localhost:8888' baseURL를 설정해줍니다. // creat..