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)

最初のパラメータで始まるインデックス、2番目のパラメータで終わるインデックスを、コピーされた配列に返します.

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

array.concat(value)

valueを配列の後ろに添付します.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-forをv-modelの値に変換する必要があります.

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

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

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

getters

パラメータ値はstateおよび他のgettersを受信できます.
stateではforEach()やfind()などを使用してstateの必要な値のみをエクスポートできます.

mutations

stateを変更して、構成部品に直接接続する方法.
帰らない.

🐣 Vueの面白い事実について~!

vueの構成部品の関数がvuexのactionsの名前と同じである場合、低いほど早く実行されます.