I would like to fetch and display data on load. After this I would like to display data on search.

Now I only manage to display data on search keyup. I would like to show the list of artist when loading the page as well.

1. How to display data on load page
2. How to display data on search

Thanks in advance!

<template>
  <div class="body">
    <div class="searchBar">
      <i class="bi bi-search"></i>
      <input
        placeholder="Search for artists"
        type="text"
        v-model="searchQuery"
        @keyup="searchArtist"
      />
    </div>
    <div class="artists">
      <div
        className="artist__list"
        v-for="artistResult in result"
        :key="artistResult.id"
      >
        <h4>{{ artistResult.name }}</h4>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import "./body.css";
export default {
  data() {
    return {
      artists: [],
      result: [],
      searchQuery: "",
    };
  },
  mounted() {
    this.fetchArtists();
  },
  computed: {
    filteredResult() {
      const res = this.result;
      const search = this.searchQuery;
      if (!search) {
        return res;
      }
      return res.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      );
    },
  },
  methods: {
    searchArtist() {
      axios
        .get(`http://localhost:3000/artists?q=${this.searchQuery}`)
        .then((response) => {
          this.result = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    fetchArtists() {
      axios
        .get("http://localhost:3000/artists")
        .then((response) => {
          this.artists = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>