Validating Input Field of Nested Component (Quasar)

Hi.. I have an issue on my quasar project. In the case, i have a dynamic operations list and every list item has an input text field.. When I select operation from operation selection box, an item is added into list. By the way, this selection is in a form component. I need to add durations for every operation selection. As you can see in following code I added that qinput field in a component into qfield. I can get input value from component but validation rules don't work because I couldn't put value for qfield.. How to do that in proper way?

<q-list bordered v-if="formData.operations">
              <draggable v-model="formData.operations">
                <q-item v-for="(operation, index) in formData.operations" :key="operation.id">
                  <q-item-section side>{{ index + 1 }}</q-item-section>
                  <q-item-section>{{ operation.translation.name }}</q-item-section>
                  <q-item-section>
                    <q-field dense :rules="[val => val && val.length > 0]" lazy-rules hide-bottom-space 
                         @blur="setDuration(operation.id, $event.target.value)">
                      <template v-slot:control="{ value, emitValue }">
                        <duration-input :value="value" @duration="emitValue"/>
                      </template>
                    </q-field>
                  </q-item-section>
                  <q-item-section avatar><q-icon color="primary" name="fas fa-sort" /></q-item-section>
                </q-item>
                <!-- <part-operation-item v-for="(operation, index) in formData.operations" :key="operation.id" 
                    :index="index"
                  :name="operation.translation.name" @duration="setDuration(operation.id, $event)" /> -->
              </draggable>
</q-list>

tisuchi

3 years ago

Level 70

@mecjos You could add a data property called durationValue to your component, and bind it to the value prop of the duration-input component like so:

<template>
  <q-field dense :rules="[val => val && val.length > 0]" lazy-rules hide-bottom-space @blur="setDuration(operation.id, durationValue)">
    <template v-slot:control="{ emitValue }">
      <duration-input v-model="durationValue" @duration="emitValue"/>
    </template>
  </q-field>
</template>

<script>
export default {
  data () {
    return {
      durationValue: ''
    }
  },
  methods: {
    setDuration (id, duration) {
      // do something with id and duration
    }
  }
}
</script>

This way, the durationValue will always be updated when the user inputs something to the duration-input and it will also be passed to the setDuration method.

1 like

mecjos

3 years ago

Level 2

@tisuchi this is my duration-input component..

<template>
  <q-input v-model="duration" @blur="$emit('duration', $event.target.value)" dense label="Süre (Tahmini dak.)" />
</template>

<script>
export default {
  data () {
    return {
      duration: null
    }
  }
}
</script>

and setDuration method like you suggest

setDuration (operationId, duration) {
      const index = this.formData.operation_durations.findIndex(duration => duration.id === operationId)
      if (index !== -1) {
        this.formData.operation_durations.splice(index, 1, { id: operationId, duration })
      } else {
        this.formData.operation_durations.push({ id: operationId, duration })
      }
    }

and my operation durations data

operation_durations: []

problem is, at form component operation durations data which the v-model binded must have multiple data..

1 like

mecjos

3 years ago

Level 2

@tisuchi

and my form looks as at following image

https://ibb.co/n8w0hZP

1 like

Please or to participate in this conversation.