vue.js 하면서 배운 것

swiper에 v-if 사용하기

swiper라이브러리에서도 vue의 문법이 묻는다!

<swiper-slide v-if="isitOdd">
  <div class="a-class">야호</div>
</swiper-slide>

javascript 배열 복사해서 사용하기

조건에 따라 배열의 요소가 편집이 되어야 했다. 하지만 수정된 배열의 조건을 실행했다가 다시 완전한 배열로 돌아오면 배열이 모두 깨져있어서, 복사된 배열을 만들어서작업을 해야했다.

array.slice(begin-i, end-i)

첫번째 인자로 시작할 인덱스, 두번째 인자로 끝날 인덱스를 복사된 배열로 반환한다.

<tag>v-for="(item, index) in Array.slice(0, 4)</tag>

array.concat(value)

value을 array의 뒤에 붙인다. value는 배열 또는 객체가 들어갈 수 있다.

<tag>v-for="(item, index) in Array.slice(0, 4).concat({})</tag>

v-model과 vuex

<template>
  <select v-model="vmodelState">
    <option
      v-for="(item, i) in Array"
      :key="`Array-${i}`"
      :value="item.Array">
         {{ item.element }}</option>
  </select>
</template>

<script>
computed: {
...mapGetters('modulename', ['getType']),
vmodelState: {
    get() { return this.getType },
    set(value) { this.actionType(value) },
   },
},
methods: {
...mapActions('modulename', ['actionType']),
  },
</script>

이후에 v-model의 값으로 v-for를 돌려야 했다.

1. 데이터 옵션 중에서 selected 프로퍼티를 추가

2. actoins > mutations로 데이터를 받아서 seleceted의 상태 변경

3. getters에서 변경된 selected을 가지고 옴

getters

인자값으로 state와 다른 getters를 받을 수 있다.
state에 forEach(), find() 등을 사용하여 state의 원하는 값들만 내보낼 수 있다.

mutations

state를 바꿀 수 있고, 컴포넌트 내의 메서드에 바로 연결된다.
return을 던지지 않는다.

🐣 vue에 대한 fun fact~!

vue의 컴포넌트의 함수와 vuex의 actions의 이름이 같을 경우 더 밑에 있을 수록 먼저 실행된다.