vue.js v-model 验证和显示字段

Question

在此代码中：

<button type="button @click="editing=true">Edit</button>
<form v-show="editing" @submit="onSubmit">
   <textarea v-model="text"></textarea>
</form>
<div> Current value: {{text}} </div>

new Vue({ //...
   data: {
     editing: false,
     text: 'initial value..'
   }
   methods: {
     onSubmit: function() { if (this.value.length < 5) alert("error") }
   }
}

如何确保 {{text}} 只显示经过验证的值？我是否必须创建两个数据成员——一个用于表单，另一个用于显示？这会导致我的代码有些混乱（我有很多大表格）。
也许有一个用于验证的 v-model 更新挂钩？
这个问题的重点 - 如果可以避免有两个数据成员。

Answer 1

v-model 对于 <textarea></textarea> 转换为：

<textarea
    v-bind:value="text"
    v-on:input="text = $event.target.value">

所以你最后一个问题的答案是否定的，没有钩子。您要么不使用 v-model 通过实现类似上面的代码或使用第二个变量用于保存您在问题中考虑的最后一个有效字符串。后者可以是：

const app = new Vue({
  el: "#app",
  data: {
    editing: false,
    text: 'Initial value..',
    lastValid: 'Initial value..',
  },
  watch: {
    text(value) {
      if (value.length > 4) {
        this.lastValid = value;
      }
    },
  },
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    <form>
      <textarea v-model="text "></textarea>
    </form>
    <div> Current value (legth > 4): {{lastValid}} </div>
  </div>
</div>

Answer 2

您可以保存最后的有效输入（在本例中长度 >= 5）并在每次按下事件时更新它，然后在提交时发送最后存储的有效值

new Vue({
 el: '#app',
 data() {
  return {
   text: 'initial value..',
   lastValid: 'initial value..'
  }
 },
 methods: {
  submit() {
    alert(this.lastValid)
  },
  textChange($event) {
    let newText = $event.target.value
    this.lastValid = newText.length < 5 ? this.lastValid : newText
  }
 }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <form>
    <textarea v-model="text" @keydown="textChange"></textarea>
    <input type="submit" value="Send" @click="submit" />
  </form>
  {{ lastValid }}
</div>

vue.js v-model 验证和显示字段

vue.js v-model validation and display field

javascript

forms

validation

vue.js

v-model