unity/resources/js/user/pages/contract-template-obligations/FormTable.vue

<template>
  <div class="mb-3">
    <div>Contract Template</div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th style="width: 25%">Details</th>
          <th>Contract Template</th>
          <th>Sequence</th>
          <th>Status</th>
          <th>Created</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="selected_contract_template_obligation" v-for="(contract, $index) in selected_contract_template_obligation" :key="$index">
          <td>{{ $index + 1 }}</td>
          <td>
            <div><b>Name</b>: {{ contract.name }}</div>
            <div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
            <div><b>Must Complete</b>: {{ contract.must_complete }}</div>
            <div><b>Must Accept</b>: {{ contract.must_accept }}</div>
          </td>
          <td>
              {{ contract.contract_template_list[0].name }}
          </td>
          <td>{{ contract.sequence }}</td>
          <td>
              <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
          </td>
          <td>
            {{ contract.created_at }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
	export default {
    props: {
      selected_contract_template_obligation: Array,
      no_convert: Boolean
    },
		methods : {
			convertStatus() {
				let vm = this;  
				vm.selected_contract_template_obligation.forEach(function(element, index) {
					element.status = General.initFormArray(Constants.contract_template_obligation_status, [element.status]);
				});
			},
		},
		created() {
			let vm = this;
      if (!vm.no_convert) {
        vm.convertStatus();
      }
		}
	}
</script>