vue.js

<template>
  <div>
    <table class="table table-striped table-bordered table-hover table-sm">
      <thead>
        <tr>
          <th></th>
          <th>Aplicada em</th>
          <th>Replicar em</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in vaccineRows" :key="index">
          <td>
            <input
              class="form-control"
              :placeholder="row.vaccine"
              @input="handleVaccineChange(index, 'vaccine', $event.target.value)"
            />
          </td>
          <td>
            <input
              class="form-control"
              placeholder="dd/mm/aaaa"
              :value="row.appliedDate"
              @input="handleVaccineChange(index, 'appliedDate', $event.target.value)"
            />
          </td>
          <td>
            <input
              class="form-control"
              placeholder="dd/mm/aaaa"
              :value="row.replicateDate"
              @input="handleVaccineChange(index, 'replicateDate', $event.target.value)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-outline-dark" @click="handleAddVaccineRow">
      Adicionar nova vacina
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Vaccines } from '@/types/vaccines';

export default defineComponent({
  name: 'VaccineTable',
  props: {
    vaccineRows: {
      type: Array as PropType<Vaccines[]>,
      required: true,
    },
    handleVaccineChange: {
      type: Function as PropType<(index: number, field: keyof Vaccines, value: string) => void>,
      required: true,
    },
    handleAddVaccineRow: {
      type: Function as PropType<() => void>,
      required: true,
    },
  },
});
</script>