JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <el-select v-model="genres" multiple placeholder="Select" @change="sortByGenres">
    <el-option v-for="item in sort_by_genres" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
</template>
</div>

SCSS

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");

Babel + JSX

var Main = {
    methods: {
      sortByGenres: function(genres) {
        this.query.genres = genres
      }
    },
    data() {
      return {
        genres: [],
        query: {
          genres: null,
        },
        sort_by_genres: [
          { value: '28', label: 'Action' },
          { value: '12', label: 'Adventure' },
          { value: '16', label: 'Animation' },
          { value: '35', label: 'Comedy' },
          { value: '80', label: 'Crime' },
          { value: '99', label: 'Documentary' },
          { value: '18', label: 'Drama' },
          { value: '10751', label: 'Family' },
          { value: '14', label: 'Fantasy' },
          { value: '36', label: 'History' },
          { value: '27', label: 'Horror' },
          { value: '10402', label: 'Music' },
          { value: '9648', label: 'Mystery' },
          { value: '10749', label: 'Romance' },
          { value: '878', label: 'Science Fiction' },
          { value: '10770', label: 'TV Movie' },
          { value: '53', label: 'Thriller' },
          { value: '10752', label: 'War' },
          { value: '37', label: 'Western' },
        ]
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')