SearchToolbar.vue

<template>
    <v-card rounded="xl">
        <v-container fluid>
          <v-row >
          <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
            <v-select  
                v-model="$parent.pos_selected"
                hide-details
                :menu-props="{ offsetY: true }"
                :dense="$vuetify.breakpoint.smAndDown"
                label="Avgrens etter ordklasse"
                :items="pos_items"
                append-icon="expand_more"
                @input="updatePos">
          </v-select>
          </v-col>
          <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
            <v-select  
                v-model="$parent.scope"
                hide-details
                :menu-props="{ offsetY: true }"
                :dense="$vuetify.breakpoint.smAndDown"
                label="Søk i"
                :items="scope_items"
                append-icon="expand_more"
                @input="updateScope">
          </v-select>
          </v-col>
          </v-row>
        </v-container>
        </v-card>
     
</template>

<script>

export default {
    name: "SearchToolbar",
    computed: {
      pos_items: function() {
        return  ["ALL", "NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{
          return {text: this.$t("pos." + text ), value: text}
        })
      },
      scope_items: function() {
        return ["w", "wb", "b", "wxb"].map(text => {
          return {text: this.$t("scope." + text), value: text}
        })
      }
    },
    methods: {
      updatePos (pos) {
        this.$emit('updatePos', pos)
      },
      updateScope (scope) {
        this.$emit('updateScope', scope)
      }
  }
}
</script>

<style scoped>

.v-card {
  padding-top: 0px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 10px !important;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
}


</style>