【发布时间】：2021-05-28 18:02:35
【问题描述】：
我有以下vue数组；
server: [
{ id: 1, name: 'Name A', ipaddress: '192.168.1.1', status: true, applied: true, modal: false },
{ id: 1, name: 'Name A', ipaddress: '192.168.1.1', status: true, applied: true, modal: false },
]
我使用这个数组在数据表上显示这些信息。用户可以在这个表中添加新行，也就是可以推送数组。此外，他们可以使用 splice 方法从表中删除他们想要的行。最后，每一行都有一个编辑按钮。由于这些按钮通过 v-model 连接到数组中的元素，因此用户可以在打开的模式窗口中对他们想要的行进行更改。 添加和编辑操作通过按下按钮时打开的两种不同模式进行。
根据所有这些信息，我想问一个问题。如何使用 Vuelidation 将验证写入可以连续添加新 rpws 的数组？这是我的 vuelidation 函数；
validations: {
server: {
required,
$each: {
name: {
required
},
ipaddress: {
required
}
}
}
}
例如，我刚刚为两个元素定义了required 属性。以下是我在添加和编辑模式中使用它们的方式；
<div>
<div">
<label>Name</label>
</div>
<div>
<label>:</label>
</div>
<div>
<input v-if="server[i].modal" v-model="server[i].name" type="text"/>
</div>
<small class="error-msg" v-if="!$v.server[i].name.required && $v.server[i].name.$dirty">Name is required.</small>
</div>
这是我向表中添加新行的方法；
addNewRow(){
this.server.push({
name: "",
ipaddress: "",
status: true,
applied: false,
modal: false
});
},
现在我有这个错误；
[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
我认为我在这里遗漏了一个重要部分，那么我该如何纠正呢？提前致谢。
【问题讨论】：
-
您好，您如何添加新项目？在您在桌子上添加新项目之前代码是否有效？
-
我已经更新了我的问题，所以你可以看到我的添加功能。我解释的部分工作得很好。我可以编辑现有行并添加新行。
-
帮助您更好地理解 1. 您想要编辑/添加的验证规则吗？ 2. 除了您遇到的错误，其他一切都正常吗？
-
确实如此。一切正常。我想要做的是将 vuelidation 添加到我的添加和编辑模式中，以便我可以检查用户是否输入了正确的 IP 地址格式。