[Vuejs]-Split API to use its part as a variable

by

0👍

✅

You can use String literal ` ` to insert dynamic value.

<button @click="apiCall(true)">Upcoming</button>
<button @click="apiCall(false)">Top Rated</button>
...
methods: {
  apiCall(isUpcoming) {
     const apiType = isUpcoming ? 'upcoming' : 'top_rated';
     const url = `https://api.themoviedb.org/3/movie/${apiType}?api_key=<>&language=en-US&page=1`;
     // Fetch data with url.
     ...
  }
}
👤Diamond

0👍

There are many ways to archive this. Without the rest of the code I cannot suggest much.
Eventually you can create a method in your VUE component that returns the “top_rated” or “upconmig”.

<template>
  <button :href="'https://api.themoviedb.org/3/movie/' + getAction + '/?yourqueryparams'"></button>
</template>
<script>
  export default {
        name: 'Movie DB',
        methods: {
          getAction: function(){
             return "top_rated"; //put condition here
          }
        }
      }
</script>
👤DonTristras

-1👍

I am not sure I understand your question, but maybe you need this:

vue template:

<button @click=handler('top_rated')>this is button no.1</button>
<button @click=handler('upcoming')>this is button no.2</button>

javascript:

methods: {
  handler(type) {
    const url = "https://api.themoviedb.org/3/movie/" + type + "?api_key=<>&language=en-US&page=1"
    return fetch(url)
  }
}
👤Weibin.Zhu

Leave a comment