본문 바로가기

vue

Vue - DOM 업데이트 후 작업하는 함수 $nextTick() Vue - DOM 업데이트 후 작업하는 함수 $nextTick()
비동기로 데이터를 가져와 테이블을 생성하고 같은 이름끼리 병합하는 함수를 생성하여 사용하였는데 어떻게 된 것인지 data를 변경하고 함수를 사용하였지만 생성한 함수가 제대로 동작하지 않음. 원인으로는 data가 변경되었지만 DOM에는 반영되지 않은 상태에서 rowsapn을 변경하려는 동작을하여 제대로 동작을 하지 못하였습니다. 이후 알게 된 것이지만 Vue는 DOM 업데이트를 비동기로 하여 컴포넌트는 즉시 재 렌더링되지 않습니다. 큐가 플러시 될 때 다음 “tick” 에서 업데이트됩니다. 해결 방법으로 DOM업데이트후 호출하는 $nextTick() 함수를 사용하여 DOM업데이트를 하고 난 뒤 병합하는 함수를 호출하는 방식으로 처리하였습니다. 사용방법 Vue.component('example', { tem..
Vue - moment.js 날짜 계산 사용하는 법 Vue - moment.js 날짜 계산 사용하는 법
moment.js를 npm을 통하여 설치합니다. npm install moment --save - package.json에서 dependencies 속에 moment가 설치되어있나 확인. 사용 방법 - 날짜 모듈을 사용하려는 vue파일을 열고 다음과 같이 사용 var moment = require('moment'); // moment 모듈불러오기 var now = moment(); //오늘 var now = moment('2020-01-01'); //특정일 셋팅 //moment().add(number,String); 추가 //moment().subtract(number,String); 빼기 var tomorrow = moment().add(1,'days'); //내일 var yesterday = mome..
Vue - checkbox 선택한 값 가져오기 Vue - checkbox 선택한 값 가져오기
v-model을 이용하여 가져옵니다. -HTML 펩시 코카콜라 815콜라 v-model을 사용한 방법으로는 data()속에 변수를 생성하여 v-model에 넣어주면 생성한 변수에 값이 들어가있습니다. 변수는 배열로 생성해야 여러개의 값이 들어감. -script export default { data(){ return{ cola_check : [], } } } 체크 박스를 모두 선택했을 경우 ["펩시" , "코카콜라" , "815콜라"]와 같이 값이 들어갑니다. 변수를 스트링으로 생성하면 올바르게 작동하지 않습니다.
Vue - Select 태그 선택한 값 Value 가져오기 Vue - Select 태그 선택한 값 Value 가져오기
Select 태그에서 @change 를 사용 펩시 코카콜라 815콜라 위 코드와 같이 select 태그에 change 함수를 사용합니다. 값 가져오기 - 함수내에서 $event에서 받은 값을 사용하여 value값 처리 함수명(envet){ console.log(event.target.value); //value값 출력 } methods 내에 다음과 같이 생성한뒤 사용하시면 됩니다.
Vue - 프로젝트 공통함수 적용하기 Vue - 프로젝트 공통함수 적용하기
1. 공통 js 생성 저의 경우 common.js를 생성하여 assets/js 안에 두었습니다. 함수 생성은 Vue.prototype.$함수명 = function(data){} 와 같은 방식으로 생성할 수 있습니다. import axios from 'axios' import config from 'config'; var requestOptions = { headers: { 'Content-Type': 'application/json', timeout: 60000 } }; export default{ install(Vue){ // ajax post Vue.prototype.$post = function (callUrl, postData, succ, fail){ var URL = `${config.conte..
Vue - ckeditor 사용방법 Vue - ckeditor 사용방법
vue 프로젝트에 ckeditor5 사용시 에러 발생 기본 에디터에 플러그인 추가시 아래 에러 발생 ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null at IconView._updateXMLContent (iconview.js:100) at IconView.render (iconview.js:76) at IconView.on (observablemixin.js:249) at IconView.fire (emittermixin.js:196) at IconView.(anonymous function) [as render] (http://localhost:3030/js/bundle.js:27142:16) at ViewCollection.o..
IntelliJ ] Vue 초기 개발 세팅 IntelliJ ] Vue 초기 개발 세팅
// IntelliJ 2018.2.8(Ultimate Edtion)으로 세팅 // node.js, npm 설치 후 진행 1. IntelliJ 모듈 생성 원하는경로에 IntelliJ 모듈 생성 File - New - module New Module - static Web - Vue.js 선택 후 Next Module name 입력 후 Next 2. IntelliJ 내 Terminal Open 3. vue-cli를 이용하여 프로젝트 생성 vue init webpack [원하는 프로젝트명] 위 코드 입력 후 나타나는 입력 창 모두 엔터해도 문제없음 4. 해당 프로젝트 경로로 이동 cd [프로젝트명] 5. Vue 프로젝트 실행 npm run dev npm start 위 두 코드중 하나 실행(npm start 가..

티스토리툴바