v-if 조건부에 따라서 조건을 둔 값이 사라지거나 생성되게 한다.

v-show css 차이로 display none 의 변경 점이 된다.

v-if의 치명적인 단점은 이벤트가 있을때

사라졌다가 다시 생기기는 현상이기 때문에

셀렉터를 선택하여 이벤트를 주었을 때 이벤트 바인딩이 풀리게 된다.

router-link 에 click event 처리를 하고 싶을때

라우터 링크에 클릭 이벤트 입력하였는데 라우터로 이동해버리고 클릭이벤트가

진행이 안될 경우가 있다. 그럴 경우에는 클릭 이벤트에 .native 속성을 추가 해주면 된다.

배열내 객체에서 중복된 값 제거 하는 방법

여러가지가 있지만 reduce와 new Set 이용 하는 것에 대해서 알아 보았다.

reduce

`객체.reduce(function(acc, current) {

  if (acc.findIndex(({ 객체 key  }) => 객체 key === current.객체 key) === -1) {

    acc.push(current);

  }

  return acc;

}, []);`

이런 식이면 중복된 객체 key 를 제거 할수 있다.

new Set()

중복 제거 에서는 이렇게 간단하게 사용되는 함수가 있다.

enw Set 으로 배열이나 객체를 감싸주면 중복된 값이 제거가 된다.

배열은 쉽게 사용할수 있지만 객체는 map 함수를 이용해야 한다.

배열로 감싸진 객체일 경우

[... new Set(객체이름.map(JSON.stringify))].map(JSON.parse);

하지만 유의할점이 있다. 객체 key 가 1개일 경우 이거나 , 두개라도 완전히 같은 것이 중복될때만 set을 사용해야 한다.

{id:1, text:'kk'} , {id:1, text:'dd'} 의 사례의 경우 id는 같지만 text 의 속성이 달라서

중복이 제거 되지 않는다.