개발중/Vue.js (52) 썸네일형 리스트형 vue - popup 이해 🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤 vue - popup 샘플 * 설명이 편하도록 부모 - 자식 (popup) 으로 부르겠다. 🤹♂️ 부모가 해야할 일 1. 자식을 import 한다 import popup from './component/popup' 2. components 에 자식을 등록한다. components: { popup } 3 - 1. template 에 자식을 그려준다. 여기까지 하면 popup 창 개념이 아닌 그냥 vue 파일 데려와서 그려준 꼴이 된다. popup 은 열고 닫히기 때문에 부모 - 자식의 소통이 필요하다. 3 - 2. 3번을 3-1이 아닌 3-2 처럼 값을 전달해줘야 한다. data() { return { popupVal : false } } 4. 자식에게 .. axios 경로 분석 mock/artical.js - 더미 생산 mock/artical.js 파일을 보면 여러개의 module 이 exports 되어 있는 것을 확인 할 수 있다. 여기서는 여러 목업 데이터들을 만들어주는 공장 역활을 하는 것 같다. json 파일도 import 하는 방법을 사용하기도 하고, for 문을 돌려서 랜덤으로 더미를 생산하기도 한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export mock/artical.js 파일에 예시로 이렇게 정의 되어 있을 때 module.exports = [ { url: '/vue-element-admin/article/update', type: 'post', response: .. popover 안내문 태그 위에 마유스 커서가 올라갔을 때 안내문이 "띵" 하고 나오게 해야한다. alter 창이 아닌 그 영역의 안내문 개념인 popover template 에서 지원하는 popover는 디자인 변경이 불가능해서 디자인 변경이 가능한 popover 를 찾아야 한다. import {Popover} from 'element-ui' popover 란 ? 특정 상황에서 현재 시점의 element 를 체크해서 그에 맞는 메뉴를 띄워주는 것 버튼 조건 키워드 버튼에 마우스가 올라갔을 때 el-popover 안에 있는 요소가 나타난다 vue 자식요소가 부모 요소 데이터 변화시 - 자식요소렌더링 지금 상황이 이러한 상황이다. A 의 부모가 B 라는 자식을 사용하는 중인데 A의 데이터인 list 를 B가 props 로 전달 받아서 사용하고 있는 중이다. A가 렌더링 되고 나서 구 후에 A의 list 의 요소가 바뀌었을 때 B는 그것을 알아채고 A의 list 에 맞게 다시 로딩이 되어야 하는데 그러지 못하는 상황이었다. 해결책 : B를 import 해서 사용할 때 보내주는 key 값을 이용하는 방법 1. B에게 보내는 key를 사용한다 2. A는 rederKey 를 가지고 있어야 한다. data() { return { rederKey : 0, list: [ { name: "A", id: 0 }, { name: "S", id: 1 }, { name: "D", id: 2 }, { name: "F", i.. 부모요소 → 자식요소 input 연동 vue 에서 항상 골머리를 썩는 부모요소와 자식 요소! 일단 부모 요소에서는 dragbox 라는 Component 를 import 하고 template 에 적용하려 한다. 부모 요소 하는 일 data() { return { price : '', }; }, 부모에서 해주는 일은 이것 뿐이다. v-model 만 이런식으로 정의 하는데 매핑이 될까? 의심 했는데 된다. v-model = "price" 자식 요소 하는 일 여기서 이해도 안되고 어이가 없는건 부모가 보내주는 값이랑 다르게 매핑했음에도 불구하고 알아서 매핑이 된다는 점이다. 이렇게 props 로 받는다. props: { value: { type: Number, default: 0 } }, input 태그를 이런식으로 써주고 메소드에서 emit 을 .. vue 파일 이름 바꿨을 때 "Already included file name~~~" 에러 🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤 https://www.youtube.com/channel/UCgkxlLdjrlsFyp2GGxzY59A vue 파일 이름만 바꿨을 뿐인데 에러가 난다 아래 옵션을 추가해주니 사라졌다. 해결책 1 더보기 stackoverflow.com/questions/51197940/file-name-differs-from-already-included-file-name-only-in-casing-on-relative-p# "forceConsistentCasingInFileNames": false, 해결책 2 VS CODE OFF 했다가 ON elementscss 라이브러리 vue 적용 아래 사이트가 아이콘이 잘 되어 있길래 사용하려 했는데 www.elementscss.com/ npm install elementscss 명령을 해도 아이콘이 나타나지 않았다. npm install 을 하면 package.json 에서 설치 된 것을 확인을 할 수는 있지만 main.js 파일에 적용을 따로 해줘야 한다. 처음에는 이런식으로 해줬지만 여전히 적용이 되지 않았다. import elementscss from 'elementscss' Vue.use(elementscss) 아래 처럼 css 파일까지 import 를 해야 한다. import Element from 'element-ui' import './styles/element-variables.scss' Vue.use(elementscss) 기존.. vue <el-table > method 참고 element.eleme.io/#/en-US/component/table @select / @selection 차이점 두 method 모두 체크박스가 변화할 때마다 작동한다는 공통점이 있지만 전체선택 기능이 있는 테이블에서 @select 는 각 행의 체크박스가 변화 할때만 작동. @selection-change 는 각 행은 물론 + 열 제일 위에 존재하는 전체 체크박스의 움직임도 감지한다 이전 1 2 3 4 5 6 7 다음
