JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="app">
  <div v-for="(book, index) in multiselectBooks" :key="index">
    {{ book }}
    {{ book.cover }}
    <img class="img-fluid" v-bind:src="'/uploads/covers/thumbs/'+book.cover">
    <multiselect 
      v-model="book.model_reading_status"
      track-by="value"
      placeholder=""
      :options="options" 
      :show-labels="false" 
      :multiple="false" 
      :searchable="false"
      :allow-empty="false"
    >
      <!-- hidden caret -->
      <span class="statusArrow" slot="caret"></span> 
      <template slot="singleLabel" slot-scope="props">
        {{ props.option.icon }}
      </template>
      <template slot="option" slot-scope="props">
        {{ props.option.icon }}
      </template>
    </multiselect>
  </div>
</div>

JavaScript

new Vue({
  components: { Multiselect: VueMultiselect.Multiselect },
  data: function () {
    return {
      books: {
        data: [
        		{ id: 1, cover: "cover_5fa97e2d5cc5a.jpg", average: 4.5, logged_rating: 4.5, reading_status: 3 }, 					
            { id: 2, cover: "cover_45gff45454ffd.jpg", average: 2, logged_rating: 2, reading_status: 1 }, 
            { id: 3, cover: "cover_dffdf234f3dda.jpg", average: 1, logged_rating: 4, reading_status: 4 }, 
        ]
      },

      options: [
          { value:1, icon: 'fa-meh-blank' },
          { value:2, icon: 'fa-laugh' },
          { value:3, icon: 'fa-surprise' },
          { value:4, icon: 'fa-tired' },
          { value:5, icon: 'fa-grin-hearts' },
      ]
    }
  },
  computed: {
    optionForValue () {
      const map = Object.create(null)
      
      for (const option of this.options) {
        map[option.value] = option
      }
      
      return map
    },
    multiselectBooks () {
      const options = this.optionForValue
      
      return this.books.data.map(book => {
        return {
          ...book,
          get model_reading_status () {
            return options[book.reading_status]
          },
          set model_reading_status (option) {
            book.reading_status = option.value
          }
        }        
      })
    }
  }
}).$mount('#app')