vue

[Vue.js] vue 이미지 src 동적 연결 (v-bind)

vue 이미지 변수로 연결하기 vue에서 프로젝트 폴더 assets에 있는 이미지를 가져올 때, 해당 변수명을 v-bind로 동적으로 설정하면 경로를 제대로 설정해도 읽어오지 못하는 문제가 발생한다. 이때는 src를 정적인 값으로 설정하거나, require를 활용하여 동적인 값을 읽어올 수 있도록 해야 한다

[Vue.js] .env .local 값을 못 읽을 때 (403 error)

1118 api key .env .local AxiosError: Request failed with status code 403\n at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)\n at XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:103:66) env local에 api key값을 넣고, 서버를 껐다가 다시 켰는데도 api key값을 읽지 못하는 문제가 발생했다. https://github.com/vuejs/vue-cli/issues/767 Env variables don't seem to load ..

[Vue.js] Vue Bootstrap b-table: 테이블 값에 링크 넣기, column명 변경

1. b-table 만들기 b-table이 없다면 v-for를 사용해서 배열의 객체를 하나씩 tr, td를 지정해 만들어야 했다. b-table은 배열 객체만 item으로 넣어주면 알아서 테이블을 생성한다. https://bootstrap-vue.org/docs/components/table#table [BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org](https://bootstrap-vue.org/docs/components/table#table) items에 table에 넣을 배열의 이름을 넣어주면 된다. 결과 사진 2. 테이블 특정 값에 링크 넣기 - 상세 정보로 이동 기존 테이블은 id를 누르면..

[Vue.js] Vue Template Syntax 뷰 템플릿 문법

Vue Template Syntax Template Syntax Vue.js는 렌더링된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용 MVVM Model : JS Object Vew: DOM View Model: 뷰 인스턴스 → 인스턴스 생성 보간법 Interpolation 보간: 변수에 할당된 값이 문자열에 들어가 대체되어 출력 Text(문자열) 데이터 바인딩의 가장 기본 형태 “Mustache” 구문: (이중 중괄호)을 사용 -> 텍스트 보관 Mustache 태그는 데이터 객체의 msg 속성 값으로 대체 (해당 값이 변경되면 갱신) Interpolation (보간법) - Raw HTML 이중 중괄호는 일반 텍스트로 해석 실제 HTML을 출력하기 ..