ki-frontend/src/views/Search.vue

<template>
    <h1>Suche</h1>
    <form @submit.prevent="submitSearch()">
        <div class="row">
            <div class="col">
                <input
                    type="text"
                    class="form-control"
                    id="searchText"
                    v-model="searchText"
                    required
                    />
            </div>
            <div class="col">
                 <button type="submit" class="btn btn-primary mb-4">Suche Starten</button>
            </div>
        </div>
    </form>
    <div class="alert alert-danger mb-4 mt-4" role="alert" v-if="showErrorMessage">
        Bei der Suche ist ein Fehler aufgetreten
    </div>
</template>
<script>
import axios from 'axios'

export default {
    name: 'Search',
  data(){
      return {
          showErrorMessage: false,
          searchText: '',
      }
  },
  methods: {
      async submitSearch(){
          this.showErrorMessage = false
          try{
              const loginResult = await axios.post(
                `${process.env.VUE_APP_API_URL}/search`,
                // Beispiel Hafte Daten
                {
                    searchText: this.searchText,
                })
                if(loginResult.status === 200){
                    //success login
                    this.router.push({path: 's/search'})
                }
                else{
                    this.showErrorMessage = true
                }
          }catch(error){
              console.error()
                this.showErrorMessage = true
          }
      }
  }
}
</script>