JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://unpkg.com/[email protected]/dist/validators.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuelidate.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.min.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/buefy"></script>

<div id="app">
  <h3>select all the text in the field and hit backspace</h3>
  <h4>After that try to undo it with ctrl+z, it doesn't work</h4>
  <h5>getting rid of <strong>either</strong> <code>:message="msg"</code> or <code>@input.once="..."</code> fixes it, so I'm not sure what's causing it</h5>
  <b-field :message="msg">
    <b-input v-model.trim="stuff" @input.once="$v.stuff.$touch"></b-input>
  </b-field>
</div>

JavaScript

Vue.use(window.vuelidate.default);
Vue.use(Buefy.default);
const { required, minLength, maxLength } = window.validators;

new Vue({
  el: '#app',
  data: {
    stuff: 'text text'
  },
  computed: {
  	msg() {
    	return this.$v.stuff.$invalid && this.$v.stuff.$dirty ? 'invalid': '';
    }
  },
  validations: {
  	stuff: {
    	required,
      minLength: minLength(5),
      maxLength: maxLength(15)
    }
  }
});