JSFiddle - React, Tailwind, and code Playground

by webwakko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css">
<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<div class="columns" id="app">
    <div class="column is-two-thirds">
      <section class="section">
        <h1 class="title">Fun with Forms in Vue 2.0</h1>
        <p class="subtitle">
          Learn how to work with forms, including <strong>validation</strong>!
        </p>
        <hr>      
        
        <!-- form starts here -->
        <section class="form">
          <div class="field">
            <label class="label">Name</label>
            <div class="control">
              <input name="name" 
                v-model="form.name" 
                v-validate="'required|min:3'" 
                v-bind:class="{'is-danger': errors.has('name')}"
                class="input" type="text" placeholder="Full name">
            </div>
            <p class="help is-danger" v-show="errors.has('name')">
              {{ errors.first('name') }}
            </p> 
          </div>
          
          <div class="field">
            <label class="label">Message</label>
            <div class="control">
              <textarea class="textarea" placeholder="Textarea" v-model="form.message"></textarea>
            </div>
          </div>
          
          <div class="field">
            <label class="label">Inquiry Type</label>
            <div class="control">
              <div class="select">
                <select v-model="form.inquiry_type">
                  <option disabled value="">Nothing selected</option>
                  <option v-for="option in options.inquiry" v-bind:value="option.value">
                    {{ option.text }}
                  </option>
                </select>
              </div>
            </div>
          </div>
          
          <div class="field">
     ...

JavaScript

Vue.use(VeeValidate);
new Vue({
  el: '#app',
  data: {
    form : {
      name: '',
      message: '',
      inquiry_type: '',
      logrocket_usecases: [],
      terms: false,
      concepts: [],
      js_awesome: ''
    },
    options: {
      inquiry: [
        { value: 'feature', text: "Feature Request"},
        { value: 'bug', text: "Bug Report"},
        { value: 'support', text: "Support"}
      ]
    }
  }
});