sample.vue

<template>
<div>
  <section class="alpine card__wrapper-content accent-line accent-line--bottom">

    <md-layout class="alpine block-column">
      <md-layout md-flex="50" class="alpine block-column__left">
          <select-registered-country :value="entry.sender.country.code" @input="updateSelectedCountry"></select-registered-country>
      </md-layout>
      <md-layout md-flex="50" class="alpine block-column__right" v-show="entry.sender.country.code">
          <select-mitra v-model="selected_mitra" :value="entry.mitra_id" :country="entry.sender.country.code" @input="updateSelectedMitra"></select-mitra>
      </md-layout>
    </md-layout>
  </section>

  <section class="alpine card__wrapper-content accent-line accent-line--bottom">

    <md-layout>
      <md-input-container md-flex="100" v-for="box in boxes" :key="box.id" :class="{ 'md-input-invalid': errors.has(getErrorName(box.type)) }">
          <box-item :box="box" v-validate data-vv-rules="required" data-vv-value-path="valid" :data-vv-name="getErrorName(box.type)" :has-error="errors.has(getErrorName(box.type))" :state="manipulations.form_state" @input="updateBoxArray(box.id, box)"></box-item>
          <span class="md-error" v-show="errors.has(getErrorName(box.type))"> {{errors.first(getErrorName(box.type))}} </span>
      </md-input-container>
      <md-layout v-show="boxes.length <= 0" md-align="center">
        <p>No boxes available. Please select mitra</p>
      </md-layout>
    </md-layout>
  </section>
</div>
</template>

<script>
import * as ORDER from '@/store/modules/order/types'
import * as ENTITY from '@/store/modules/entity/types'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import BoxItem from './BoxItem'
import SelectMitra from '@/components/dropdowns/SelectMitra'
import SelectRegisteredCountry from '@/components/dropdowns/SelectRegisteredCountry'
import SelectRegion from '@/components/dropdowns/SelectRegion'

export default {
  name: 'form-order-box',
  components: {
    BoxItem,
    SelectMitra,
    SelectRegisteredCountry,
    SelectRegion
  },

  data () {
    return {
      selected_mitra: ''
    }
  },

  created () {
    this.pruneBoxes()
  },

  mounted () {
    if (this.$route.params.id) {
      this.fetchBoxes(this.entry.mitra_id)
    }
  },

  watch: {
    selected_mitra (val) {
      this.isLoading(true)
      this.fetchBoxes(val).then((response) => {
        this.isLoading(false)
      })
    }
  },

  computed: {
    ...mapState({
      boxes: state => state.entity.boxes,
      entry: state => state.order.entry
    }),
    ...mapGetters({
      manipulations: ORDER.GET_MANIPULATIONS
    })
  },

  methods: {
    ...mapActions({
      fetchBoxes: ENTITY.FETCH_BOXES
    }),
    ...mapMutations({
      setBoxList: ENTITY.SET_BOXES,
      pruneBoxes: ORDER.PRUNE_BOXES,
      editOrder: ORDER.EDIT_ORDER_SHIPMENT,
      isLoading: ORDER.IS_ORDER_LOADING,
      updateBoxes: ORDER.UPDATE_BOXES
    }),

    updateBoxArray (id, obj) {
      this.updateBoxes({index: id, value: obj})
    },

    getErrorName (type) {
      return `keterangan_box_${type}`
    },

    prune () {
      this.pruneBoxes()
      this.pruneBoxList()
    },
    pruneBoxList () {
      this.setBoxList([])
    },

    updateSelectedCountry (val) {
      this.editOrder({path: 'sender.country', value: val})
      this.editOrder({path: 'consignee.country', value: val})
    },
    updateSelectedMitra (val) {
      this.editOrder({path: 'mitra_id', value: val})
    }
  }
}
</script>