삐삐사전

Chart.js 만을 사용해서 차트를 사용 해보려고 했는데 뜨기는 하는데 update가 안되서 한참 고민을 하다가 결국에 vue-chart-3으로 바꿨습니다. update 도 간단하게 되고 좋네요. 설치 yarn add vue-chart-3 chart.js 이미 chart.js 가 깔린 경우는 깔지 않아도됩니다. 표 삽입 방법 template 을 작성 해줍니다. import { defineComponent } from 'vue'; import { DoughnutChart } from 'vue-chart-3'; import { Chart, registerables } from "chart.js"; Chart.register(...registerables); export default defineCompon..

저는 YARN 을 사용하고 있기 때문에 yarn 으로 설치를 해줬습니다. yarn add vue-chartjs chart.js 차트를 띄우려고 하는 vue 파일에 적용하면 됩니다. template 에는 필요한 부분을 Bar 형태의 차트 기준입니다. import { Bar } from 'vue-chartjs' import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js' ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) 그 이후에 차트에 대한 정보를 넣어줍니다. data() { ret..

this.$router.replace({ path: this.$route.path, query: { name: this.myname, } }) query에는 내가 url을 변경할 때 넘기는 query를 작성해주면 된다.

data 에 변수 를 하나 넣어준다. ​ data() { return { activeTab : 'a' } }, ​ 해당 값은 컴포넌트에서 클릭시 변동이 되게 해두었다. ​ 예약목록 ​ 해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다. ​ 그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다. ​ oldVal 은 안써도 된다.

매번 기억은 하는데 쓰려고 하면 잊어버린다. ​ ​ #부모컴포넌트 부모 컴포넌트에서는 이렇게 작성을 해준다. getCheckedCode 는 부모 컴포넌트의 함수이고 addCheckCode는 자식컴포넌트에서 올라오는 값이다. ​ ​ #자식컴포넌트 newlyCheckedBox(code){ this.$emit('addCheckCode', code) }, 자식 컴포넌트에서 부모컴포넌트에 써준 '이벤트명'을 넣어준다. 여기서는 $emit 을 사용해야 한다. 같이 전달해야 하는 값이 있어서 옆에 code 를 작성해주었다.

아이콘을 적용하다가 도저히 괜찮은 아이콘이 없어 결국 폰트어썸으로 왔다. ... https://fontawesome.com/docs/web/setup/get-started Get Started Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com FontAwesome Docs 를 보면 제일 하단에 Vue 라고 있다. Vue.js 에서 적용하는 방법이 나와있다. npm i --save @fortawesome/fontawesome-svg-core npm 기준으로 먼저 설치를 한 후 # Free icons styles npm i --save @fortawesome..

페이지를 왔다갔다 하다 보면 해당 페이지의 이름으로 페이지별 구분할 때가 생긴다. 한개의 메인 레이아웃에서 로그인이나 회원가입 페이지로 가면 메뉴바를 숨기기 위해 이 방법을 사용하였다. watch : { $route(to, from){ console.log(to) console.log(from) } }, 홈레이아웃의 watch 에 넣어주었다. 이렇게 넣으면 콘솔에는 해당 라우터의 이름이 뜬다. 이 중에서 name 이 필요했기 때문인데 필요한 값을 넣으면 된다. watch : { $route(to, from){ console.log(to.name) console.log(from.name) } }, 이런식으로 필요한 값만 출력을 시킬 수 있다.

data 에 변수를 하나 넣어준다. data() { return { activeTab : 'a' } }, 해당 값은 아래처럼 컴포넌트에서 클릭시 변동이 되게 해두었다. 목록 해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다. 그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다. ​ oldVal 은 변경되기 이전의 값이고 newVal은 새로운 값이다. watch : { activeTab(newVal){ console.log(newVal) } }, oldVal은 이런식으로 작성을 하지 않아도 된다.

매번 기억은 하는데 쓰려고 하면 잊어버린다. ​ 부모 컴포넌트 부모 컴포넌트에서는 이렇게 작성을 해준다. getCheckedCode 는 부모 컴포넌트의 함수이고 addCheckCode는 자식컴포넌트에서 올라오는 값이다. 자식 컴포넌트 newlyCheckedBox(code){ this.$emit('addCheckCode', code) }, 자식 컴포넌트에서 부모컴포넌트에 써준 '이벤트명'을 넣어준다. 여기서는 $emit 을 사용해야 한다. 같이 전달해야 하는 값이 있어서 옆에 code 를 작성해주었다.

데이터를 전달시켜야 하는데 상위 컴포넌트 말고 아예 다른 컴포넌트로 전달을 시켜야 했다. 그래서 찾아보다가 vuex를 발견. import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { menuType : '' }, mutations: {}, actions: {}, modules: {}, }); store.js를 생성하여 만들어준다. 지금 사용하는 프로젝트에서는 store/index.js 안에 생성이 되어있어서 따로 생성할 필요는 없었다. import Vue from "vue"; import store from "./store"; export const eventBus = new ..