JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div class="col-md-4">
  <div class="form-group" id="source-fields" class="source-fields">
    <label for="source">Source Fields</label>
    <div>
      <select v-model="selected" multiple class="form-control" size="5">
        <option :value="option.value" v-for="option in fields">{{ option.text }}</option>
      </select>
    </div>
  </div>
</div>

<div id="sf-detail-info" class="col-sm-6 well well-sm">
  <span>{{ field.Name }}</span>
  <span>{{ field.Label }}</span>
  <span>{{ field.Type }}</span>
</div>

JavaScript

var sf_detail = {
  Name: 'Test',
  Label: 'Data',
  Type: 'Boolean'
};
// these are the other field vars
var source_fields = [{
  text: 'test',
  value: 'value'
}, {
  text: 'test2',
  value: 'value2'
}, {
  text: 'test3',
  value: 'value3'
}, {
  text: 'test4',
  value: 'value4'
}, {
  text: 'test5',
  value: 'value5'
}, {
  text: 'test6',
  value: 'value6'
}];

var sf_detail_info = new Vue({
  el: '#sf-detail-info',
  data: {
    field: sf_detail
  }
});


var sf = new Vue({
  el: '#source-fields',
  data: {
    selected: '',
    filter: '',
    fields: source_fields
  },
  watch: {
    selected: function(val) {
      getSourceFieldDetails(val)
    }
  }
})

function getSourceFieldDetails(val) {
  // this would actually call an ajax endpoint to get this data
  console.log(val[0]);
  sf_detail.Name = val[0];
  sf_detail.Label = val[0] + 'Label',
    sf_detail.Type = val[0] + 'DataType'
  console.dir(sf_detail);
}