refactor: use vuelidate for vue 3 in AddAutomationRule.vue
This commit is contained in:
+11
-8
@@ -7,22 +7,22 @@
|
||||
v-model="automation.name"
|
||||
:label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
|
||||
type="text"
|
||||
:class="{ error: $v.automation.name.$error }"
|
||||
:class="{ error: v$.automation.name.$error }"
|
||||
:error="errors.name || ''"
|
||||
:placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
|
||||
@blur="$v.automation.name.$touch"
|
||||
@blur="v$.automation.name.$touch"
|
||||
/>
|
||||
<woot-input
|
||||
v-model="automation.description"
|
||||
:label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
|
||||
type="text"
|
||||
:class="{ error: $v.automation.description.$error }"
|
||||
:class="{ error: v$.automation.description.$error }"
|
||||
:error="errors.description || ''"
|
||||
:placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
|
||||
@blur="$v.automation.description.$touch"
|
||||
@blur="v$.automation.description.$touch"
|
||||
/>
|
||||
<div class="event_wrapper">
|
||||
<label :class="{ error: $v.automation.event_name.$error }">
|
||||
<label :class="{ error: v$.automation.event_name.$error }">
|
||||
{{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
|
||||
<select v-model="automation.event_name" @change="onEventChange()">
|
||||
<option
|
||||
@@ -33,7 +33,7 @@
|
||||
{{ event.value }}
|
||||
</option>
|
||||
</select>
|
||||
<span v-if="$v.automation.event_name.$error" class="message">
|
||||
<span v-if="v$.automation.event_name.$error" class="message">
|
||||
{{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
|
||||
</span>
|
||||
</label>
|
||||
@@ -102,7 +102,7 @@
|
||||
:show-action-input="
|
||||
showActionInput(automation.actions[i].action_name)
|
||||
"
|
||||
:v="$v.automation.actions.$each[i]"
|
||||
:v="v$.automation.actions.$each[i]"
|
||||
@resetAction="resetAction(i)"
|
||||
@removeAction="removeAction(i)"
|
||||
/>
|
||||
@@ -140,6 +140,7 @@ import { mapGetters } from 'vuex';
|
||||
import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
|
||||
import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
|
||||
import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
|
||||
import {
|
||||
AUTOMATION_RULE_EVENTS,
|
||||
@@ -158,7 +159,9 @@ export default {
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
|
||||
|
||||
Reference in New Issue
Block a user