flaschengeist-frontend/src/components/baruser/SearchBar.vue

<template>
  <div>
    <v-toolbar>
      <v-spacer />
      <v-toolbar-items>
        <v-autocomplete
          outlined
          return-object
          v-model="user"
          style="margin-top: 3px"
          placeholder="Suche Person"
          :items="allUsers"
          item-text="fullName"
          prepend-inner-icon="search"
          full-width
          :search-input.sync="filter"
        />
        <v-btn text @click="addUser">Hinzufügen</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'SearchBar',
  props: {},
  data() {
    return {
      user: null,
      filter: ''
    }
  },
  created() {
    this.getAllUsers()
  },
  methods: {
    ...mapActions({
      getAllUsers: 'barUsers/getAllUsers',
      addCreditList: 'barUsers/addCreditList',
      setFilter: 'barUsers/setFilter'
    }),
    addUser() {
      this.addCreditList(this.user)
      this.user = null
    }
  },
  computed: {
    ...mapGetters({ allUsers: 'barUsers/allUsers' })
  },
  watch: {
    filter(val) {
      this.setFilter(val)
    }
  }
}
</script>

<style scoped></style>