TIL 002
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의 이름이 같을 경우 더 밑에 있을 수록 먼저 실행된다.
Author And Source
이 문제에 관하여(TIL 002), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yerimm_mm_/TIL-002저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)