I am encountering an issue while attempting to transfer data from one component to another. Can someone provide assistance? Below is the code snippet:
<template>
<div class="q-pa-md" style="max-width: 900px">
<div v-if="fields.length">
<q-item-label header>User settings</q-item-label>
<q-list v-for="field in fields" :key="field.id">
<div v-if="field.type == 'singleLine'">
<q-item>
<q-item-section>
<s-input
:label="field.name"
:rule="field.rule"
:required="field.required"
:type="field.fieldType" />
</q-item-section>
<q-item-section side top>
<div style="display: inline-flex;">
<div>
<q-icon name="edit" color="blue" size="md" @click="editField = true"/>
<q-tooltip>
Edit {{ field.name }} field
</q-tooltip>
</div>
</div>
</q-item-section>
</q-item>
</div>
<q-dialog v-model="editField">
<edit-field
:field="field"
>
</edit-field>
</q-dialog>
</div>
</template>
export default {
name: 'Registration',
data() {
return {
newItem: true,
titleAction: null,
title: null,
titleHideEvent: false,
editField: false,
fields: {},
field: {},
loading: false
}
},
methods: {},
mounted() {
this.titleAction = 'Registration'
this.titleHideEvent = true
}
}
Edit field component:
<template>
<q-card>
<q-card-section>
<div class="text-h6">Edit Field</div>
</q-card-section>
<q-separator />
<q-card-section style="max-height: 60vh; min-width: 560px;" class="scroll">
<q-form @submit.prevent="onSubmit">
<s-select
autocomplete
sorted
v-model="fieldToSubmit.type"
:options="$store.getters['options/list']('fieldTypes')"
option-value="value"
option-label="label"
label="Field Type"
required
/>
<s-input v-model="fieldToSubmit.name" label="Name" required />
<s-select
autocomplete
sorted
v-model="fieldToSubmit.subType"
:options="$store.getters['options/list']('registrationFieldTextSubTypes')"
option-value="value"
option-label="label"
label="Subtype"
required
/>
<s-checkbox v-model="fieldToSubmit.required" label="Required" />
<s-checkbox v-model="fieldToSubmit.active" label="Active" />
<q-separator />
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn label="Add" color="primary" type="submit" v-close-popup />
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</template>
<script>
export default {
props: ['field'],
data () {
return {
fieldToSubmit: {
}
}
},
methods: {
onSubmit () {
console.log(this.fieldToSubmit)
this.$q.notify({
color: 'green-4',
textColor: 'white',
icon: 'cloud_done',
message: 'Submitted'
})
}
},
mounted () {
this.fieldToSubmit = Object.assign({}, this.field)
}
}
</script>
Upon clicking the edit button, the modal opens but does not populate the fields with existing values. Any insights on what may be causing this issue? I have attempted passing field values through props, but I am unsure if this is the correct approach.