Me gustaría obtener y mostrar datos en carga. Después de esto, me gustaría mostrar datos en la búsqueda.

Ahora solo logro mostrar datos en la clave de búsqueda. También me gustaría mostrar la lista de artistas al cargar la página.

1. Cómo mostrar datos en la página de carga
2. Cómo mostrar datos en la búsqueda

¡Gracias por adelantado!

 <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>