JSFiddle - React, Tailwind, and code Playground

by spham

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">
<div class="columns" id="app">
    <div class="column is-two-thirds">
      <section class="section">
        
        
       
        
        <!-- form starts here -->
        <section class="form">
<div class="field">
<label for="" class="label">myvar</label>
              <input type="text" v-model="form.myvar">
</div>
<div class="field">
            <label class="label">Name</label><p>
            </p>
            
            <div class="control">

              <textarea v-model="fullName" name="form.name" id="name" cols="30" rows="10"></textarea>
            </div>
          </div>
        </section>
      </section>
    </div>
    
    <div class="column">
      <section class="section" id="results">
        <div class="box">
          <ul>          
            <!-- loop through all the `form` properties and show their values -->
            <li v-for="(item, k) in form">
              <strong>{{ k }}:</strong> {{ item }}
            </li>
          </ul>
        </div>
      </section>
    </div>
  </div>

JavaScript

new Vue({
  el: '#app',
  data: {
    form : {
    	myvar: 'hello',
      name: 'worlds'
    }
  },
  computed: {
    fullName: {
      get() {
        return `${this.form.myvar} ${this.form.name}`;
      },
     }
   }
});