본문 바로가기

웹공뷰/vue3

vue Toast Viewer에 data가 안 넘어간다.(+해결) 라우터 params로 넘어오는 id를 이용해 firestore에서 도큐먼트를 읽어온 후, template 태그 안의 변수들에 값을 넣고 ToastViewer 컴포넌트에도 데이터를 넘기려 했으나 계속해서 ToastViewer props에서는 데이터를 읽어오지 못했다. {{ title }} {{ dt }} import TuiViewer from "./Editor/ToastViewer.vue"; import {getDocument} from "../firestore.js" export default { components: { TuiViewer, }, data(){ return{ title: '', dt: '', content: '', } }, async mounted() { const id = this.$r.. 2023. 11. 12.

vue2, vue3 차이점 Options API VS. Composition API 아래는 vue2와 vue3의 샘플코드다. vue2 샘플 코드 (Options API) {{ message }} Change Message vue3 샘플코드 (Composition API) {{ message }} Change Message Options API와 Composition API 가 도대체 뭘까? 정의를 읽어봤을때 딱히 와닿는 설명들이 크게 없었다. 그래서 차이점을 한번 정리해보자. Options API Composition API 구성 객체 중심의 접근방법 data, methods, computed 등의 옵션등을 통하여 컴포넌트를 구성한다. 함수 중심의 접근. data 옵션 대신 바로 변수를 return{}한다. methods대신 바로 함수를 선언하고 mounted 옵션 대신 onMounte.. 2023. 11. 9.

vue.js 라우터 링크에 따라 변하는 컴포넌트 입학정보 페이지를 만드는 중이다. 컴포넌트 안에 router-link :to="/guide/notice" router-link :to="/guide/qna" 등의 링크를 걸어놓으면 Guide라는 컴포넌트를 불러오게 되는데 Guide 라는 컴포넌트 안에 여러 컴포넌트들을 import 해놓고 $router.params의 값을 읽어 하단 영역에 출력하게 된다. 처음엔 div 태그에 v-if를 걸어서 $router.params.board === "notice" 식으로 조건문을 걸어야 하나. 조건문을 함수로 만들어야 하나 하다가 엄청 심플한 방법을 찾게됐다. 1. data()에 변수 선언 - selectedComponent는 $router.params.board 값이 있으면 그 값이 set 되고, 아니라면 보여줄.. 2023. 10. 27.

이전 1 다음

티스토리툴바