ki-frontend/src/views/Search.vue

<template>
  <div class="container">
    <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>
  </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>