[PJ] Vue 공부중7

Teleport

원하는 코드를 원하는 곳으로 이동 가능

 

index.html 

modal div 추가

<div id="app"></div>
<div id="modal"></div>

 

pages/todos/index.vue

style 투명도 추가 

<template>
<div style="opacity: 0.5">
 ...
</div>
</template>

모달창까지 투명해짐

 

components/TodoList.vue

index.html 에 있는 modal 로 이동시켜버림

<Teleport to="#modal">
<Modal
  v-if="showModal"
  @close="closeModal"
  @delete="deleteTodo"
/>
</Teleport>

모달이 위에 잘 뜸.

 

 

API 연동 문제

 

- CORS

 

- 해결

최 상단에 vue.config.js 파일 생성

module.exports = {
  publicPath: "./",
  devServer: {
    proxy : 'API URL'
  }
};

Home.vue

const getLists =async () =>{
  try{
    const res = await axios.get("/board");
    console.log(res.data);
    
  } catch(err){
    console.log(err)
  }
}
getLists();

api url 이 / 로 인식되어서 위와같이 api 작성하면 성공

 

참고 : https://velog.io/@martinalee94/Vue-CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

https://velog.io/@dwc4198/vue.js-axios-CORS%EC%97%90%EB%9F%AC%ED%95%B4%EA%B2%B0