ygdc/assets/js/components/teamElem.js

import { onMounted, ref, computed, watch, nextTick } from "vue";

const html = (v) => { return v[0] };

export default {
  props: ['team', 'id'],
  setup(props) {
    return {  }
  },
  template: html`
    <div class="team element">
      <div class="player">
        <template v-if="team.member[0] !== undefined">
          <img :src="team.member[0].img ? team.member[0].img : '/assets/img/placeholder_person.png'">
          <h2 class="name">{{ team.member[0].forename }} {{ team.member[0].surname }}</h2>
          <!-- <h3 class="nickname">{{ team.member[0].nickname }}</h3> -->
        </template>
        <template v-if="team.member[0] === undefined">
        <h2 class="name">No Player</h2>
        <h3 class="nickname">&nbsp;</h3>
        </template>
      </div>
      <div class="player">
        <template v-if="team.member[1] !== undefined">
          <img :src="team.member[1].img ? team.member[1].img : '/assets/img/placeholder_person.png'">
          <h2 class="name">{{ team.member[1].forename }} {{ team.member[1].surname }}</h2>
          <!-- <h3 class="nickname">{{ team.member[1].nickname }}</h3> -->
        </template>
        <template v-if="team.member[1] === undefined">
          <h2 class="name">No Player</h2>
          <h3 class="nickname">&nbsp;</h3>
        </template>
      </div>
    </div>
  `
}