JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <select-list v-model="parameters[0]" label="some list" url="none"></select-list>
  <div>
  output : {{ parameters }}
  </div>
</div>

JavaScript

Vue.component("select-list", {
  data: function() {
    return {
      values: [],
      items: []
    }
  },
  template: `
        <div class="form-group">
        <label>{{ label }}</label>
        <div class="scrollable">
            <div class="text-muted" v-if="!items.length">No items to display</div>
            <div class="checkbox" v-for="i in items" :key="i.id">
                <label><input type="checkbox" v-model="values" v-bind:value="i.id">{{ i.name }}</label>
            </div>
        </div>
    </div>

    `,
  props: ['label', 'url', 'value'],
  watch: {
    values(v) {
      this.$emit('input', v);
    },
    value: {
      immediate: true,
      handler(v) {
        this.values = v;
      }
    }
  },
  mounted: function() {
    this.getData();
  },
  methods: {
    getData: function() {
      var self = this;
      /* $.ajax({
          type: "GET",
          url: window[this.url],
          success: function (data) {
              self.items = data;
          }
      }); */
      self.items = [{
        id: 1,
        name: "one"
      }, {
        id: 2,
        name: "two"
      }, {
        id: 3,
        name: "three"
      }];
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    parameters: [
      [1,3]
    ]
  }
})