JSFiddle - React, Tailwind, and code Playground

by nachocab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<div id="app">
   <form>
     <p>submitted: {{ submitted }}</p>
     <textarea v-model="msg" @keydown="inputHandler" rows="8"></textarea>
   </form>
</div>

CSS

textarea {
  width: 100%;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	msg: '',
    submitted: false,
  },
  methods: {
    inputHandler(e) {
    	this.submitted = false;
      
      if (e.keyCode === 13 && !e.shiftKey) {
        e.preventDefault();
        this.submitForm();
      }
    },
    submitForm() {
    	if (this.msg) {
      	this.submitted = true;
        this.msg = '';
      	console.log('handle form submission')
        // or this.$el.submit();
      }
    }
  }
})