TECHS: Vue.js 3 com TS, Quasar
REPO NO GITHUB: Clique aqui
NOME DOS ARQUIVOS EM QUE ESTÁ A MINHA DÚVIDA: tables.vue e tables.ts, O link é esse
O QUE EU QUERO QUE O MEU CÓDIGO FAÇA: Quero que os meu input ou o meu select se ele for obrigatorio, que ele retorne erro se o user não preencher ele
A ESTRUTURA
Eu tenho no meu arquivo table.ts, dentro da propriedade data() um array com a seguinte estrutura:
data() {
return {
inputs: [
{
vModel: '',
name: 'nameTable',
type: 'text',
title: 'Nome da tabela',
required: true
},
{
vModel: '',
type: 'number',
name: 'numberRow',
title: 'Quantidade de linhas da tabela',
required: true
},
{
vModel: '',
name: 'dayBegin',
type: 'date',
title: 'Dia inicial da tabela',
required: false
},
{
vModel: [],
name: 'weekDays',
title: 'Dias da Semana que a tabela vai ter que repetir',
options: [{
label: "Domingo",
value: "sunday"
},
{
label: "Segunda",
value: "monday"
},
{
label: "Terça",
value: "tuesday"
},
{
label: "Quarta",
value: "wednesday"
},
{
label: "Quinta",
value: "thursday"
},
{
label: "Sexta",
value: "friday"
},
{
label: "Sábado",
value: "saturday"
}
],
required: true
},
],
}
},
Cada objeto representa um input ou select e note que nos objetos eu falo se ele é required ou não. Já no meu html que está no table.vue a parte do código que eu utilizo o objeto inputs é com o q-input ou q-select, ex.:
<div
class="my-5"
v-for="input in inputs"
:key="input.title">
<span class="font-bold">{{ input.title.toUpperCase() }}</span>
<q-select
v-if="input.options"
v-model="input.vModel"
:options="input.options"
filled multiple
/>
<q-input
v-else
v-model="input.vModel"
:type="input.type"
filled
/>
</div>
PROBLEMA
Eu quero fazer uma validação de que dependendo do input ou select ele seja obrigatorio levando em conta o required e retorne uma mensagem para o user, só que somente se o input ele for obrigatorio, e só para lembrar que esse input é um array eu tentei com o vuelidate, mas não conseguir entender muito. Como eu poderia fazer isso?