Handling dynamic form fields in Vue.js with Vuelidate - validation not triggering on blur
After trying multiple solutions online, I still can't figure this out... I'm trying to figure out I'm sure I'm missing something obvious here, but I'm working on a form in Vue.js that allows users to dynamically add fields for entering user details. I'm using Vuelidate for validation, but I've run into an scenario where the validation is not triggered when the fields are added or modified. For example, when I add a new field and then click out of it (on blur), the behavior messages do not appear as expected. I've defined my validation rules like this: ```javascript import { required } from 'vuelidate/lib/validators'; export default { data() { return { users: [{ name: '' }], }; }, validations: { users: { $each: { name: { required }, }, }, }, }; ``` I’ve tried calling `this.$v.$touch()` after adding a new field to force validation, but it doesn't seem to work as expected. I also tried using a watcher on the users array to trigger validation, but that didn't yield any results either. Here’s the part where I handle adding a new user: ```javascript addUser() { this.users.push({ name: '' }); this.$v.users.$touch(); // This doesn’t seem to trigger validation }, ``` I'm receiving a message in the console stating `want to read property '$touch' of undefined`, which suggests that Vuelidate is not recognizing the new fields. How can I ensure that validation is triggered correctly for dynamically added fields? I'm using Vue 2.6.12 and Vuelidate 0.7.4. Any insights on best practices for managing dynamic fields with validation would be greatly appreciated. Thanks in advance! My team is using Javascript for this web app. What am I doing wrong? I'm developing on macOS with Javascript. Cheers for any assistance! I'm working with Javascript in a Docker container on CentOS. Thanks for your help in advance!