將數據傳遞給組件 Vue.js

Question

我試圖將數據從一個組件傳遞到另一個組件，但存在一些問題。 有人可以幫忙嗎？ 這是我的代碼：

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

編輯字段組件：

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

當我單擊編輯按鈕時，它會打開模態，但不會使用現有值填充字段。 有誰知道可能有什么問題？ 我試圖用道具傳遞字段的值，但我不知道這是正確的方法

Answer 1

首先，父模板的 HTML 無效： q-list和之前的div沒有正確關閉。 這可能是問題的一部分。

您需要先在父級中導入並注冊edit-field組件，然后才能使用它。 在現有export之前執行import 。 根據文件名和路徑，類似

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

然后，同樣在父組件中，更改選項以包含用於注冊子組件的components屬性，並在其中列出導入的組件，如下所示：

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

您提到的道具用法看起來沒問題，假設field在父級中有數據。