Vuejs - Add dynamic required in fields

1

I started studying vuejs and started a new project using f7 + vue.

A doubt arose.
I’m doing an input validation via HTML, but I need to check before saving if the field is really validated and then show the error message …
Validation is working through HTML, but how do I perform validation via JS (VUE), in other words, force validation.

My input:

					<f7-list-input
						v-if="field.field == 'input'"
						:value="formData[index]"
 						@input="formData[index] = $event.target.value"
						:ref="index"
						:name="index"
				        :label="$t(field.text)"
				        :type="field.type"
				        :validate="field.validation && field.validation.required ? true : false"
				        :required="field.validation && field.validation.required ? true : false"
				        :placeholder="$t(field.placeholder)"					        
				        clear-button>				   
				    </f7-list-input>					    
				    <!--  -->

My method in js:
onSubmit: function(event) {
const self = this;
}

2

Use F7’s APIs to trigger validation for form or input programmatically https://framework7.io/docs/inputs.html#input-app-methods

this.$f7.input.validate(...)
this.$f7.input.validateInputs(...)

Both of them will return true/false (in latest F7 version)