Vue - Searching API endpoint dependent on dropdown selection

Hello, I’m trying to figure out how to search different api endpoints depending on which dropdown option is selection. Each endpoint is structured differently, so I would fetch the api for the search term, dependent upon which option is selected.

Here’s what I have so far, with just one endpoint for artists currently being searched upon keydown.enter

<template v-if="searchedArtists" >

  <div class="container">
      <div class="form-row mt-4">
        <div class="col-md-10">
          <label for="searchTerm"></label>
            placeholder="Search events, locations, or artists"

        <!-- Current Search is for artists only -->
<!-- dropdown selector for search -->
        <div class="col">
          <label for="eventType"></label>
          <select class="form-control" id="exampleFormControlSelect1">


<!-- Card to display searched items -->
<div class="wrap" v-for="artist in searchedArtists" :key="">
  <div class="card mb-4 mt-4">
      <div class="card-body">
          <h5 class="card-title">
            {{ artist.displayName }}
              v-if="artist.onTourUntil"> - On tour until
               {{ artist.onTourUntil | moment("MMMM Do")}}
        <p class="card-text">
       <a :href="artist.uri" class="btn btn-sm btn-primary" target="_blank">Songkick Artist Page</a>





//import ShowCard from './ShowCard'

export default {
  name: "Search",
  //  components: {
  //   ShowCard
  // },

  data: function() {
    return {
      // test songkick api key
      apiUrl: "",
      apiKey: "*************",
      events: null,
      searchedArtists: null,
      query: null

  methods: {
    searchArtists: function() {
      const url = `${this.apiUrl}/search/artists.json?apikey=${this.apiKey}&query=${this.query}&per_page=10`;

        .then(response => response.json())
        .then(data => {
          this.searchedArtists = data.resultsPage.results.artist

  //   created: function() {
  //     this.fetchEvents();
  //  }