セレクトボックスの初期表示【Vue.js】

セレクトボックスの初期表示をする場合、hidden属性を持つoptionタグを最初に記載します。

pugとTypeScriptを使用しています。

<template lang="pug">
  select(v-model="selectedPtn")
    option(value="" hidden) Choose    // 初期状態で表示されるが、選択肢には表示されない
    option(v-for="ptn in ptns" :value="ptn.ID") {{ptn.text}}
</template>

<script lang="ts">
  selectedPtn: string = "";
  ptns: IPattern[] = [
    {
      ID: 1,
      text: "S"
    },
    {
      ID: 2,
      text: "M"
    },
    {
      ID: 1,
      text: "L"
    }
  ];
</script>