<template>
  <fieldset class="form-group">
    <div tabindex="-1" role="group">
      <div id="gender" role="radiogroup" tabindex="-1" class="btn-group-toggle btn-group" variant="primary">
        <label :class="`btn btn-fumei${check == 0 ? '-check' : ''}`">
          <input id="gender0" name="gender" type="radio" autocomplete="off" class="" v-model="check" value="0" />
          <span>不明</span>
        </label>
        <label :class="`btn btn-danshi${check == 1 ? '-check' : ''}`">
          <input id="gender1" name="gender" type="radio" autocomplete="off" class="" v-model="check" value="1" />
          <span>男性</span>
        </label>
        <label :class="`btn btn-joshi${check == 2 ? '-check' : ''}`">
          <input id="gender2" name="gender" type="radio" autocomplete="off" class="" v-model="check" value="2" />
          <span>女性</span>
        </label>
      </div>
    </div>
  </fieldset>
</template>

<script>
  export default {
    props: { sel: 0 },
    data: function () { return { check: this.sel } }
  }
</script>