JSFiddle - React, Tailwind, and code Playground

by Ryan Adriano

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<div id="my-app">
  <div>
    <label for="example">Test dropdown list ({{ selectedVal }})</label>
  </div>
  <div>
    <select id="example" style="width: 300px" v-bind:value="selectedVal">
      <option v-for="opt in opts" v-bind:value="opt.id">{{ opt.text }}</option>
    </select>
  </div>
</div>

JavaScript

$('#example').select2({
  placeholder: 'Select a value'
});

Vue.directive('selected', {
	bind: function (el, binding, vnode) {
		var key = binding.expression;
		var select = $(el);

		select.select2();
		vnode.context.$data[binding.expression] = select.val();

		select.on('change', function () {
			vnode.context.$data[binding.expression] = select.val();
		});
	},
	update: function (el, binding, newVnode, oldVnode) {
		var select = $(el);
		select.val(binding.value).trigger('change');
	}
});

var vm = new Vue({
  el: '#my-app',
  data: {
  	selectedVal: 0,
    opts: [{
      id: 1,
      text: 'Test 1'
    }, {
      id: 2,
      text: 'Test 2'
    }, {
      id: 3,
      text: 'Test 3'
    }]
  }
});