Pass data to component Vue.js

Question

I'm trying to pass data from one component to another, but there is some problem. Can someone help with this? Here is my code:

<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>

when i click on edit button it opens modal but it doesn't fill fields with existing values. Does anyone know what could be problem? I've tried to pass values of field with props but i don't know is this proper way to do it

Answer 1

First, the parent template's HTML is invalid: q-list and the div before it are not properly closed. That may be part of the problem.

You need to import and register the edit-field component in the parent before you can use it. Do an import before the existing export. Depending on file name and path, something like

import edit-field from '@/components/edit-field.vue';

Then, also in the parent, change the options to include a components property for registering child components, and list the imported component there as follows:

name: 'Registration',
components: {
  edit-field
},
data () {
...

The props usage that you mentioned looks ok, assuming field has data in the parent.