У меня есть два компонента A и B, которые содержатся в компоненте C. Я добавляю элемент из B в список в родительском компоненте C и передаю список компоненту A. Однако один элемент автоматически добавляется в список при загрузке страницы (когда компонент C визуализируется). Я использую реквизиты для передачи списка от родительского компонента C к дочернему компоненту A.
Родительский компонент (C)
<template>
<div>
<contact-summary :contacts="contacts"> </contact-summary>
<contact-detail @submittedContact="submittedContact"></contact-detail>
</div>
</template>
<script>
import ContactDetails from "./ContactDetails.vue";
import ContactSummary from "./ContactSummary.vue";
export default {
data() {
return {
contacts:[ {
businessName: null,
contactPerson: null,
address: null,
contactNumber: null,
selectedCategory: null
}],
};
},
methods: {
submittedContact(contact) {
console.log(contact);
this.contacts.push(contact);
}
},
components: {
"contact-detail": ContactDetails,
"contact-summary": ContactSummary
}
};
</script>
Компонент B
<template>
<div class="container">
<h3>Contact Details</h3>
<hr />
<form method="post">
<div v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li class="text-danger" v-for="error in errors" :key="error">{{ error }}</li>
</ul>
</div>
<div class="row">
<div class="form-group col-md-6">
<label>Business Name</label>
<input
type="text"
class="form-control"
v-model="contact.businessName"
/>
</div>
<div class="form-group col-md-6">
<label>Contact Person</label>
<input
type="text"
class="form-control"
v-model="contact.contactPerson"
/>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label>Address</label>
<textarea
type="text"
class="form-control"
v-model="contact.address"
></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label>Contact Number</label>
<input
type="text"
class="form-control"
v-model="contact.contactNumber"
/>
</div>
<div class="form-group col-md-6">
<label>Category of Business</label>
<select id="inputState" class="form-control">
<option
v-for="category in category"
:key="category.categoryCode"
:selected="(contact.selectedCategory = category.categoryText)"
>{{ category.categoryText }}</option
>
</select>
</div>
</div>
<button class="btn btn-primary" @click.prevent="submitRequest">
Submit Contact
</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
errors: [],
contact: {
businessName: null,
contactPerson: null,
address: null,
contactNumber: null,
selectedCategory: null
},
category: [
{
categoryText: "Food",
categoryCode: 1
},
{
categoryText: "Medicine",
categoryCode: 2
},
{
categoryText: "Shop",
categoryCode: 3
},
{
categoryText: "Housekeeping",
categoryCode: 4
}
]
};
},
methods: {
submitRequest(e) {
if(this.checkForm())
{
this.$emit("submittedContact", this.contact);
this.contact = {};
this.errors = [];
}
else{
e.preventDefault();
}
},
checkForm(e) {
if (
this.contact.businessName &&
this.contact.contactPerson &&
this.contact.contactNumber &&
this.contact.address &&
this.contact.selectedCategory
) {
return true;
}
this.errors = [];
if (!this.contact.businessName) {
this.errors.push("Business Name Required");
}
if (!this.contact.contactPerson) {
this.errors.push("Contact Person Required");
}
if (!this.contact.contactNumber) {
this.errors.push("Contact Number Required");
}
if (!this.contact.address) {
this.errors.push("Address Required");
}
if (!this.contact.selectedCategory) {
this.errors.push("Category Required");
}
}
}
};
</script>
<style scoped></style>
Компонент A
<template>
<div class="container">
<h3>Contact Summary</h3>
<table class="table">
<thead>
<tr>
<th scope="col">SNo#</th>
<th scope="col">Business Name</th>
<th scope="col">Contact Person</th>
<th scope="col">Address</th>
<th scope="col">Contact Number</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody v-if="contacts.length>0">
<tr v-for="(contact,index) in contacts" :key="index">
<th scope="row">{{index}}</th>
<td>{{contact.businessName}}</td>
<td>{{contact.contactPerson}}</td>
<td>{{contact.address}}</td>
<td>{{contact.contactNumber}}</td>
<td>{{contact.selectedCategory}}</td>
</tr>
</tbody>
<p v-else>No Records Found</p>
</table>
</div>
</template>
<script>
export default {
data() {
return {
contact: {
businessName: null,
contactPerson: null,
address: null,
contactNumber: null,
selectedCategory: null
}
}
},
props:['contacts']
}
</script>
<style scoped></style>