将列表类型的道具传递给子组件的默认情况下是将一项添加到列表中-Vuejs

Question

我在组件C中包含两个组件A和B。我将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>

Answer 1

在Component A中，从contacts传递了Component C，在Component C中，将contacts数组设置为默认值