在这段代码中:
<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 更新钩子?
这个问题的重点——是否可以避免拥有两个数据成员。