thoth-frontend-test/src/components/searchHeader/searchBox.vue

<template>
  <div class="searchBox">
    <div v-for="(item, index) in list" :key="index" class="row">
      <searchForm
        :data="item"
        :loading="loading"
        @change="$emit('change')"
        @getOption="(key, q, utilName) => $emit('getOption', key, q, utilName)"
      />
    </div>
  </div>
</template>
<script>
import searchForm from './searchForm'
export default {
  components: {
    searchForm
  },
  props: {
    list: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      loading: false
    }
  }
}
</script>
<style scoped lang="scss">
.searchBox {
  .row {
    width: 810px;
    margin-top: 15px;
    &:first-child {
      margin-top: 0;
    }
  }
}
</style>