Vue

<template>
  <div class="page">
    <div>
      <div class="g-product-block">
        <h4>Status Order</h4>
        <v-radio-group v-model="statusOrder">
          <v-radio label="Belum Dibayar" color="red" value="belumbayar" class="radioStatusOrder"></v-radio>
        </v-radio-group>
        <hr>

        <v-radio-group v-model="statusOrder">
          <v-radio label="Selesai" color="red" value="selesai" class="radioStatusOrder"></v-radio>
        </v-radio-group>
        <hr>
        <v-radio-group v-model="statusOrder">
          <v-radio label="Batal" color="red" value="batal" class="radioStatusOrder"></v-radio>
        </v-radio-group>
        <hr>
      </div>
      <div class="g-product-divider"/>
    </div>

    <div>
      <div class="g-product-block">
        <h4>Status Pengiriman</h4>
        <v-radio-group v-model="statusPengiriman">
          <v-radio
            label="Belum Dikirim"
            color="red"
            value="belum-dikirim"
            class="radioStatusPengiriman"
          ></v-radio>
        </v-radio-group>
        <hr>
        <v-radio-group v-model="statusPengiriman">
          <v-radio
            label="Sampai Tujuan"
            color="red"
            value="sampai-tujuan"
            class="radioStatusPengiriman"
          ></v-radio>
        </v-radio-group>
        <hr>
      </div>
      <div class="g-product-divider"/>
    </div>

    <BottomNavFilterHistoryTransaction/>
  </div>
</template>


<script>
const components = {
  BottomNavFilterHistoryTransaction: () =>
    import('~/components/buyer/BottomNavFilterHistoryTransaction.vue' /* webpackChunkName: "BottNavHistoryTransBuyer" */)
}

export default {
  middleware: 'authenticated',
  layout: 'buyer/top_nav_w_title_w_close_buyer',
  components,
  head() {
    return {
      title: 'Filter'
    }
  },
  data() {
    return {
      statusOrder: '',
      statusPengiriman: ''
    }
  }
}
</script>