You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi guys, I have a really weird use case for the dynamic tags component. I'm trying to input a list of years and apply validation but for some reason it's applying the validation when a year is inputted saying there isn't any year. I'm hoping someone can help me out. Right now I've changed it to use the ref instead of computed property since I thought it would work better according to the documentation but it seems to not work.
<scriptsetuplang="ts">importtypeWrapperfrom'~/shared/components/form/Wrapper.vue'constprops=withDefaults(defineProps<{schoolYears: number[]schoolYearsReadonly?: boolean}>(),{
...
})constemit=defineEmits<{(e: 'update:schoolYears',value: number[])(e: 'success')(e: 'test')}>()constschoolYears=computed<string[]>({get: ()=>props.schoolYears.map(String),set: (value: string[])=>emit('update:schoolYears',value.map(Number)),})constinputYears=ref<string[]>([])constformRules=withRuleTriggers({schoolYears: {required: true,key: 'schoolYears',trigger: ['change'],message: 'At least one School Year is required',validator: (_,value: string[])=>{console.log('value:',value)if(value.length>1){returnnewError('At least one School Year is required')}returntrue},},})constformRef=ref<InstanceType<typeofWrapper>>()constformModel=ref({
inputYears,})defineExpose({ submit })functionsubmit(){formRef.value?.submit()}onMounted(()=>{inputYears.value=props.schoolYears?.map(String)??[]})functionhandleUpdate(newYears: string[]){constmappedInputYears=newYears.map(Number)emit('update:schoolYears',mappedInputYears)}</script><template><EgLoading :show="props.isTestingConnection"><FormWrapper
ref="formRef"
:model="formModel"
:rules="formRules"
@success="emit('success')"> <div class="containermy-5"> <NAlert v-if="props.schoolYearsReadonly" class="mb-5"
type="warning">Schoolyearsmaynotbechangedonceanrecordiscreated.</NAlert><NDynamicTagsv-model:value="inputYears"label="School Year(s)"
name="schoolYears"
:readonly="props.schoolYearsReadonly"
:disabled="props.schoolYearsReadonly"
@update:value="handleUpdate" /></div></FormWrapper></EgLoading></template>
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi guys, I have a really weird use case for the dynamic tags component. I'm trying to input a list of years and apply validation but for some reason it's applying the validation when a year is inputted saying there isn't any year. I'm hoping someone can help me out. Right now I've changed it to use the ref instead of computed property since I thought it would work better according to the documentation but it seems to not work.
CodeSandbox -> https://codesandbox.io/s/smoosh-breeze-ll2sqq
Beta Was this translation helpful? Give feedback.
All reactions