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

Always try to supply simplified code pls. Your way of passing prop-data looks good, though you don't need Object.assign (already passing an object). Check whats actually in the field object by displaying {{ field }} somewhere in your parent. — rx2347
– rx2347, Commented Mar 9, 2020 at 14:32

Dan · Accepted Answer · 2020-03-09 14:44:13Z

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.

edited Mar 9, 2020 at 14:44

answered Mar 9, 2020 at 14:03

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

kavkax Over a year ago

i have another js file for importing components, it show that form from edit-field component, but it just doesn't retrieve field data

Dan Over a year ago

What happens when you console.log(this.field) in the child's mounted?

Dan Over a year ago

That indicates that field is empty in the parent. Also the q-list tag is not closed so your HTML is invalid. And another div outside of it is also not closed. May be related.

Dan Over a year ago

Also, remove field from the parent's data property since you are defining it in the v-for

kavkax Over a year ago

everything was solved after i delete field from data property

|

Collectives™ on Stack Overflow

Pass data to component Vue.js

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related