vue/filter-by-type.html

<!DOCTYPE html>
<html>
    <head>
      <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
      
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>

            <v-layout align-center justify-center>

                    <v-flex xs6>
                            <v-select :items="['gif','jpg,png','jpg,png,gif']"
                                 v-model="image_type"
                                 label="Mime Types"
                                 attach></v-select>
                         </v-flex>
             
                <v-btn color="blue" dark large @click="getImage" >
                        Another &nbsp; <v-icon>refresh</v-icon>
                </v-btn>
            </v-layout>

            <v-layout row wrap>
                <v-flex xs12 >
                <v-card flat tile class="d-flex">
                    <v-img :src="image.url" >
                    </v-img>
                </v-card>
                </v-flex>
            </v-layout>

        </v-container>
      </v-content>
    </v-app>
  </div>
 
  <script>
    new Vue({ 
        el: '#app',
        vuetify: new Vuetify(),
        data: {
            image: { url: ""},
            image_type: 'gif'
        },
        watch: {           
            image_type: function()
            {
                this.getImage();
            }
        },
        created(){
            this.getImage();
        } ,
        methods:{
            async getImage()
            {
                try{
                    axios.defaults.headers.common['x-api-key'] = "DEMO-API-KEY" // Replace this with your API Key

                    let response = await axios.get('https://api.thecatapi.com/v1/images/search', { params: { limit:1, size:"full" , mime_types: this.image_type } } ) // File the search to only return the mime_types selected
                    
                    this.image = response.data[0] // the response is an Array, so just use the first item as the Image

                    console.log("-- Image from TheCatAPI.com")
                    console.log("id:", this.image.id)
                    console.log("url:", this.image.url)
                    
                }catch(err){
                    console.log(err)
                }
            }
        }
    })
  </script>
</body>
</html>