vue

<template>
<div>
  <div class="row">
		<a href="add.html"> añadir archivo </a>
	</div>
	<div class="row col-xs-2">
			<p>{{msg}}</p>
      <ul>
        <li :key="file.webViewLink" v-for="file of files">
          <p><strong>{{file.title}}</strong></p>
          <a :href="file.webViewLink">
             <img :src="chooseExtension(file.extension)" style="width: 20%">
             {{file.filename}}.{{file.extension}}
          </a>
        </li>
      </ul>

	</div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js PWA',
      files: []
    }
  },
  created () {
    axios.get('http://localhost:9005/list')
      .then(response => {
        this.files = response.data
      })
  },
  methods: {
    chooseExtension (extension) {
      if (extension === 'txt') {
        return 'static/img/txt.jpg'
      }
      if (extension === 'pptx') {
        return 'static/img/ppt.jpg'
      }
      if (extension === 'docx') {
        return 'static/img/docx.jpg'
      }
      if (extension === 'pdf') {
        return 'static/img/pdf.jpg'
      }
      if (extension === 'xlsx') {
        return 'static/img/xlsx.jpg'
      }
      if (extension === 'zip') {
        return 'static/img/zip.jpg'
      }
      if (extension === 'jpg' || extension === 'png') {
        return 'static/img/img.png'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #35495E;
}

</style>