I'm facing a dilemma in this situation. Whenever I click on + Rule, it triggers the function below:
showAddRuleModal() {
this.showAddRule = true
this.$refs.form.reset()
//reset form values
this.ruleName = ''
this.url = 'https://www.'
this.urlType = 'Single'
this.ruleDetails = []
let ruleDetail = {
attribute_id: '',
operator_id: '',
value: ''
}
this.ruleDetails.push(ruleDetail)
}
In the screenshot, you can see that I successfully created one rule and attempted to add another.
https://i.sstatic.net/ZeS8c.png
Although the other values appear to reset, my ruleName input still shows an error even after using this.$refs.form.reset().
Any idea how I can resolve this issue?
Note
If I set the default value to include a space
this.ruleName = ' '
the error disappears, but now my form includes an unnecessary space in the ruleName field. It works, but it's not ideal.