[英]Pass data to component Vue.js
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
我试图用道具传递字段的值,但我不知道这是正确的方法
First, the parent template's HTML is invalid: q-list
and the div
before it are not properly closed.首先,父模板的 HTML 无效:
q-list
和之前的div
没有正确关闭。 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.您需要先在父级中导入并注册
edit-field
组件,然后才能使用它。 Do an import
before the existing export
.在现有
export
之前执行import
。 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:然后,同样在父组件中,更改选项以包含用于注册子组件的
components
属性,并在其中列出导入的组件,如下所示:
name: 'Registration',
components: {
edit-field
},
data () {
...
The props usage that you mentioned looks ok, assuming field
has data in the parent.您提到的道具用法看起来没问题,假设
field
在父级中有数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.