JSFiddle - React, Tailwind, and code Playground

by Echoes Wu

HTML

<link rel="stylesheet" href="https://unpkg.com/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vueforce"></script>

<div id="app">
  <es-page>
    <es-form>
      <es-form-element
        v-bind="{
          label: field.label,
          value: field.value,
          editable: field.edit
        }"
        v-on:dblclick="edit(field)"/>
    </es-form>
  </es-page>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    field: {
    	label: 'vueforce field',
      value: 'here is vueforce',
      edit: false
    }
  },
  methods: {
  	edit: function (f) {
      f.edit = true
    }
  }
})