Vue getters and setters on v-model:

Question

我有一个表单，上面有大约 30 个字段，我想使用 getter 和 setter 进行一些验证，但您在计算中使用它们，不能具有相同名称的计算和数据值。

已经有一些示例，其中模型和计算属性是相同的，并且资源库设置了数据模型，但这仅以一个字段为例。在实践中，对我来说，这样做将是一个体面的重构。有没有办法保持我的modeldata连接并使用吸气器/设置器？

表单 - 使用库 Vue-表单生成器

<form action="#">
<vue-form-generator
:schema="schema"
:model="model"
options="formOptions"
>
</vue-form-generator>
</form>

数据属性：

data: function () {
return {
model:{
id: "",
strategyId: Number, 
name: "",
symbol: "", 
symbolPair: "",
entryType: "", 
conditionalLongEntryPoint: Number, 
conditionalShortEntryPoint: Number, 
entryPrice: Number, 
....

Answer 1

https://v2.vuejs.org/v2/guide/forms.html#Modifiers

如果您只需要验证用户是否在input type="number"的字段中提供数字，这可能是您要查找的内容。

如果您需要更多的东西，我建议您在v-model的data成员上设置一个监视属性，并在该函数中进行验证。为此，您可以对要检查有效性的数据成员执行正则表达式匹配。

您似乎要求的是能够在数据成员上拥有getter和setter，这是开箱即用的。最接近它的事情是在调用get和set方法时应用条件逻辑，这将是 Vue 组件或根实例中methods对象的一部分。