JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <div v-for="i in 5">
    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="getPreviewHandler(i)" :file-list="fileList">
    <el-button size="small" type="primary">upload</el-button>
  </el-upload>
  </div>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      getPreviewHandler(i) {
        return file => {
          this.handlePreview(i, file)
        }
      },
      handlePreview(i, file) {
        console.log(i, file)
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')