Vue Formulate

Vue Formulate is a Form Builder, with built in Validation, Formats, and live data binding with JSON output

The advantage of VUE inline is: you can update via linked Schema, to Commerce, CRM, EHR, Evaluation API that will mutate in 2 directions or on a schedule, within moderated ETL services.

Formats, “Types” and Validations are simply declared in the declarative modifiers. Very easy to use.

Data live saves and will link to external server side operations without push or dependency on a database. 

{{ values }}
{{ results }}
<script src="https://cdn.jsdelivr.net/npm/@braid/vue-formulate@2.4.1/dist/formulate.min.js"></script>
<link rel="stylesheet" href="https://surveyaz.netlify.app/assets/css/formulate.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>


<div id="app">
  
  <formulate-form
    v-if="!results"
    v-model="values"
    @submit="handleSubmission"
  >
    <formulate-input
      name="email"
      type="email"
      label="What is your email?"
      validation="required|email"
      help="We wont’t sell it...for cheap."
      placeholder="jon@example.com"
    ></formulate-input>

    <!-- Try changing the "type" to select, checkbox etc.. -->
    <formulate-input
      name="opinion"
      type="radio"
      label="What do you think of Vue Formulate?"
      :options="{
        good: 'It’s good',
        great: 'It’s great',
        install: 'I’m installing it now.'
      }"
      validation="required"
    ></formulate-input>
    <formulate-input
      label="Input mode numeric"
      type="text"
      inputmode="numeric"
      pattern="[0-9]*"
      help="Only shows number keyboard on mobile"
    ></formulate-input>
    {{ values }}
    <formulate-input
      type="submit"
      label="Save feedback"
    ></formulate-input>

  </formulate-form>
  <div v-else>
    <pre>{{ results }}</pre>
    <formulate-input
      type="button"
      label="Reset form"
      @click.native="reset"
    />
  </div>
</div>




<script>
/**
 * When using the formulate.min.js distribution you
 * need to use VueFormulate.default when registering.
 **/
Vue.use(VueFormulate)


new Vue({
  el: '#app',
  data: {
    results: false,
    values: {}
  },
  methods: {
    handleSubmission (data) {
      this.results = data
    },
    reset () {
      this.results = false
    }
  }
})
</script>

Axios

A library that will transport JSON data in real time, syndication with privacy/security to and from custom APIs.

Bring your own API/Schema “endpoint” see 8base/Xano article. Also Contentful, Sanity, Graph CMS etc….

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>


<div>
	<div>
		<div id="axios-sample">
			<ul>
				<li v-for="item in list">
					{{ item.username }} <a :href="`mailto:${item.email}`">{{ item.email }}</a>
				</li>
			</ul>
		</div> <!-- /#app -->
	</div> <!-- /.column -->
</div> <!-- /.row -->


<script>
    

// Vue Axios Call
new Vue({
	el: '#axios-sample',
	data: {
		list: null
	},
	methods: {
		getUsers: function() {
			var vm = this;
			axios.get('https://jsonplaceholder.typicode.com/users').then(function(response) {
				vm.list = response.data;
			}, function(error) {
				console.log(error.statusText);
			});
		}
	},
	mounted: function() {
		this.getUsers();
	}
});
</script>
© 2020 All rights reserved. Powered by Yoonsun Lee.