【ゼロから学ぶNuxt3×Typescript】⑤リアクティブ変数とクラスバインディング

Nuxt３×TypeScript 学習
下記の参考サイトを見ながら、Nuxt３とTypescriptを学ぶ第5回。

▼　神回|vue3.js nuxt3 typescriptどうやる？【ゼロから解説】

前回はこちら👇

第1回はこちら👇

前回はreactiveとrefを使って状態管理ができるようになりました。
今回は配列を書いていくところから！

1.求人情報を入れる<ul>を書く

<template>
  <input type="text" name="name" v-model="person.name">
  <button type="button" @click="addSan">登録</button>

  <p>あなたの名前は<span class="u-tx-bold">{{ person.name }}</span></p>
  
  <button type="button" @click="showProfile">プロフィールを表示</button>

  <p v-if="isShowProfile">id: {{ person.id }}</p>
  <p v-if="isShowProfile">name: {{ person.name }}</p>
  <p v-if="isShowProfile">age: {{ person.age }}</p>

  <ul>
    <li v-for="job in jobs" :key="job.id">
      <p :class="{ active:job.id == 2, active2:job.id == 3 }">
        求人ID: {{ job.id }}
      </p>
      <p>求人タイトル: {{ job.name }}</p>
      <p>求人内容: {{ job.content }}</p>
    </li>
  </ul>
</template>

• v-forディレクティブを使用して、jobs配列内の求人情報を繰り返し表示
• :key属性
  • Vue.jsに対して各アイテムの一意な識別子を提供します。
• :class属性 クラスバインディング

<p :class="{active:job.id == 2,active2:job.id==3}">求人ID: {{ job.id }}</p>

これは、右辺の条件を満たすならactiveを返すというvueの記法。

• job.id が 2 であれば、activeクラスが追加される
• job.id が 3 であれば、actived2クラスが追加される

2.リアクティブな変数jobsを作成し、その初期値として求人情報の配列を代入

<script language="ts">

import { ref , reactive } from 'vue'

export default {
  setup() {
    const name = ref('')
    const nameWithSan = ref('')

    const isShowProfile = ref(false)

    // 空の配列を初期値とするリアクティブ変数 jobs を作成
    const jobs = ref([])
    // jobsのvalueプロパティに、求人情報のオブジェクトを要素とする配列を代入
    jobs.value = [
      { id: 1,
        title: '求人1',
        content: '求人1の仕事内容です。'
      },
      { id: 2,
        title: '求人2',
        content: '求人2の仕事内容です。'
      },
      { id: 3,
        title: '求人3',
        content: '求人3の仕事内容です。'
      },
      { id: 4,
        title: '求人4',
        content: '求人4の仕事内容です。'
      },
    ];

    // 中略
    return {
      name,
      nameWithSan,
      person,
      isShowProfile,
      // 　jobs 追加
      jobs,
      addSan,
      showProfile,
    }
  }
}
</script>

• 空の配列を初期値とするリアクティブ変数 jobs を作成
• jobsのvalueプロパティに、求人情報のオブジェクトを要素とする配列を初期値として代入
  • 求人情報が変更されると、関連するUIも自動的に変更される

今回はここまで！

参考サイト