[Vue]v-list-tile active class, background-color

vue의 v-list-tile에는 active-class Props가 있다.

해당 리스트 타일이 선택되었을때 자동으로 해당 class가 달리고, css를 해당 클래스로 입히는것 같다.

이러한 active-class를 사용자 정의 class를 추가할 수 있고, 사용자 정의 class에 따라 다른

css를 부여 할 수 있게 된다.

(디폴트가 primary--text 인데, 디폴트 클래스로 css를 수정하면 모든 v-list-tile에 css가 동일하게 적용되어 난감한 상황이 발생 할 수 있다.)

props 주는 방법은 다행히도 그냥 클래스 목록을 쭈욱 쓰면 되는듯..


  <v-list-tile active-class="primary--text menu">


vuetify에서도 primary--text 클래스를 기본적으로 같이 추가하는것을 권고 하고 있어서, 그 뒤에 원하는 클래스를 추가하면 된다.

그리고 스타일 태그 내에서 해당 클래스로 css를 부여하면 된다.


.menu {
    border-right-color: #d5d8dc;
    border-right-style: solid;
    background-color: #f8f9f9;
    color: black !important;
  }


추가적으로, 선택된 리스트의 background 컬러를 모두 동일하게 바꾸고 싶으면 active 클래스 앞에 a 태그를 붙이도록 하자. (크롬으로 확인하니 a태그가 붙더라..)

  a.primary--text {
    background-color: #f8f9f9;
  }

[Vue] dialog , component 내의 v-tabs slider 안보이는 버그

문제 : Vue에서 v-tabs 를 dialog내 첫 로딩시 slider 가 보이지 않는 현상이 발생한다.

<정상 Slider >

<비정상 Slider>

사소하지만 신경 쓰이는 버그임이 분명하다..

깃허브에도 버그리포트와 해결 방법을 일부 설명해주고 있다.
https://github.com/vuetifyjs/vuetify/issues/1978

Dialog 해결 방법 : lazy prop을 추가하면 된다!!


추가 문제 : component화 시킨 자식 컴포넌트에 삽입하면 lazy prop이 먹히지 않는다.....

역겨운 구글링 결과 $refs.tabs.slide() (내부적으로도 해당 함수를 통해 slider를 보이게 한다는 것..) 실행 시키면 가능하다고 하지만.. 버전이 달라서 그런지 해당함수는 존재하지 않는다.....

그렇다면, $refs.tabs 를 한번 찍어보자... 다행히도 비슷해 보이는 callSlider 함수가 있다.

해당 함수를 호출하니 다행히도 버그가 해결 되었다.. 다시는 만나지 말자..

아래는 전체 소스 코드이다

<자식 컴포넌트 ref 부여>

<childComp ref="tab_right" ></childComp>

<v-tabs ref 부여>

<v-tabs v-model="active" ref="tabs">

<특정 메소드(버튼을 눌렀다던지) 내부에서 $refs를 통해 v-tabs의 callSlider 함수 호출 >

//부모 컴포넌트에서 다이렉트로 접근 할때

this.$refs.tab_right.$refs.tabs.callSlider() 

//부모 컴포넌트에서 자식 컴포넌트의 함수를 수행, 

this.$refs.tab_right.onSelect() 

//자식 컴포넌트에서는 위 처럼 callSlider 를 수행
//onSelect()
this.$refs.tabs.callSlider()

vue atom console 경고 창 무시 방법

vue console 경고 창 무시 방법

log 앞 뒤로 주석 추가.

Rule로 바꾸는 방법이 있다고 하지만 테스트가 잘 안되서 나중에 확인..

/* eslint-disable */
        console.log(error.response);
/* eslint-enable */

vue axios 내부 함수 호출

vue에서 REST 요청을 위해서 axios를 많이 활용 한다.

jQuery에서 $.get(), $.post 와 같이 vue에서는 axios.get()으로 쓴다.

틀은 다음과 같음

axios.get('url')
 .then(response => {
 //응답 처리

 })
 .catch(error => {
 //에러 처리

 });

!then 문에서 methods에 정의된 함수를 호출할 경우 Reference Error가 발생 할 수 있다.
=> 해결 방법은 axios 호출 전에 this를 임시 변수에 넣고 해당 변수를 활용하는 방법으로 해결 할 수 있다. (아래 코드 참조)

let self = this
    
axios.get('url')
   .then(response => {
      response.data.forEach(function(value){
        value.a = self.innerMethod(value.a) //  Reference Error 발생 부분, this대신 self로 대체
      });
      self.a = response.data // data 또한 self로 접근
   })
   .catch(error => {
        console.log(error.response);
   });

vue data table

https://vuetifyjs.com/en/components/data-tables#data-table 참고

• sort 주의 할 점 :

1.  내부적으로 sort에 ascending(오름차 순) / descending(내림차 순) / unsorted (미정렬) 상태가 존재 한다.
• 따라서, data table 컬럼에 sortable을 true로 한 컬럼은 세 가지 상태를 준수하게 된다.
• => 미정렬 상태로 인해 sort가 안되는 것 처럼 보이지만 제대로 작동하는 것
• => 이 부분이 거슬린다면 must-sort를 True로 변경하면 미정렬 상태는 없음


2. 사용자 정의 정렬 함수

• Date 데이터는 날짜의 차이에 따라 정렬이 되어야 한다. 따라서 custom-sort props에 사용자 정의 정렬 함수를 추가 해야 한다.

<v-data-table :custom-sort="customSort" :headers="headers"></v-data-table>

• custom-sort 함수는 (item 목록, index (column의 value 값), 정렬 방법) 세가지 인자 값을 가지고 정렬된 목록의 아이템을 반환하면 된다. (props의 custom-sort 참조)

• 대략적인 소스는다음과 같다.

  customSort(items, index, isDescending) {
    items.sort((a, b) => {      
      if (index === 'Column Name') {
        if (isDescending) {
          return new Date(b.timestamp) - new Date(a.timestamp);
        } else {
          return new Date(a.timestamp) - new Date(b.timestamp);
        }
      }

      //필요하다면 else-if문으로 column에 따라 다르게 적용가능
    });

   return items;
  }

• 첫 행 CSS 안 먹히는 버그
• 무심코 넘어갈려다가 보니 페이지의 첫 행들은 모두 CSS가 안먹는 버그가 발생 (page 첫 로드 시에만)
• 이때는 key props를 할당하면 다시 원하는 CSS가 먹힘(이상하게 콘솔로 찍으면 태그의 클래스가 혼자 다르게 먹음..)
• 예를 들어, v-for로 하였다면 key를 i로 한다던지, 특정 데이터를 반복하여 생성하였다면 해당 아이템의 id를 key로 할당 (:key="i")

vue create 명령어로 만든 프로젝트 IP, port 변경

vue create ""Project Name" 으로 생성시 (vue-cli 3.x 버전 이후..) npm run serve를 수행하면

Local (localhost:8080), Network(내부 ip 주소:8080)으로 실행이 됨

!!외부 ip 주소 혹은 포트를 변경하고 싶다면

project/package.json 내용 변경
 =>

{
 "name" : ..
 "version" : ..
 "private" :
 "scripts" :{
  "serve" : "vue-cli-service serve",
           ...
 }
}

==>

{
 "name" : ..
 "version" : ..
 "private" :
 "scripts" :{
  "serve" : "vue-cli-service serve --host 203.x.x.x --port 8081",
           ...
 }
}


즉, npm run serve 에서 serve는 스크립트를 수행 하는 명령어. 내부 적으로는 vue-cli-service를 실행

Vue draggable

Vue draggable  (https://github.com/SortableJS/Vue.Draggable)

move 이벤트를 통해 draggable의 함수 적용 시

=> move 이벤트는 소스 draggable 태그에 작성

=> 타겟 draggable에서는 새로운 아이템이 들어오더라도 move 함수 실행이 작동 x
 => 대신 change 이벤트에 added 이벤트로 접근 가능 (이미 added 된 상태이기 때문에 added 되기 전 이벤트를 감지하지는 못함.)



group의 name으로 드래그-앤-드롭이 가능한 리스트를 식별

pull : 'clone' => 아이템을 뺄 때 '복제'되어 이동 (원본 리스트에서는 삭제 x)
put : false    => 아이템이 드롭 불가능
:sort="false" => 내부 정렬 불가능 속성


move  => return 을 true로 하면 이동 허용, false는 이동 불가
(move 함수내에서 evt.relatedContext.list 내에 중복 element가 있는지 확인하여 중복 여부를 가지고 리스트 중복 제거 가능)

move 이벤트로 접근 가능한 속성은 다음과 같음

• evt.draggedContext : 드래그 한 element의 context 정보 
• evt.draggedContext.index : 드래그한 element의 인덱스 (draggable 태그의 :list(혹은 v-model)과 연결된 data에서의 인덱스
• evt.draggedContext.element : 드래그한 element
• evt.draggedContext.futureIndex : 드롭이 성공했을 때 들어갈 해당 draggable 태그의 :list(혹은 v-model)과 연결된 data에서의 인덱스 

• evt.relatedContext : 드롭 대상 element의 context 정보 
• evt.relatedContext.index : 드롭 대상의element의 인덱스 
• evt.relatedContext.element : 드롭 대상의 element
• evt.relatedContext.list : 드롭 대상의 list 정보 (해당 list 확인을 통해 중복 체크 확인 가능)
• evt.relatedContext.component : 드롭 대상의 VueComponent