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

我有两个组件A和B，它们包含在组件C中。我将B中的一个项目添加到父组件C的列表中，并将列表传递给组件A。但是，在页面加载时（组件C渲染时），一个项目会自动添加到列表中。我使用道具将列表从父组件C传递到子组件A

父组件（C）

从“/ContactDetails.vue”导入ContactDetails；
从“/ContactSummary.vue”导入ContactSummary；
导出默认值{
数据（）{
返回{
联系人：[{
businessName:null，
联系人：空，
地址：空，
联系人号码：空，
selectedCategory:空
}],
};
},
方法：{
提交的联系人（联系人）{
控制台日志（联系人）；
这个。触点。推（触点）；
}
},
组成部分：{
“联系人详细信息”：联系人详细信息，
“联系人摘要”：联系人摘要
}
};

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>

联系方式

请更正以下错误：

{{error}

企业名称
联系人
地址
联系电话
业务类别
{{category.categoryText}
提交联系人
导出默认值{
数据（）{
返回{
错误：[]，
联系人：{
businessName:null，
联系人：空，
地址：空，
联系人号码：空，
selectedCategory:空
},
类别：[
{
分类文字：“食品”，
类别代码：1
},
{
分类文字：“医学”，
类别代码：2
},
{
分类文字：“商店”，
类别代码：3
},
{
类别文本：“客房管理”，
类别代码：4
}
]
};
},
方法：{
提交请求（e）{
if（this.checkForm（））
{
this.$emit（“submittedContact”，this.contact）；
this.contact={}；
this.errors=[]；
}
否则{
e、 预防默认值（）；
}
},
支票表格（e）{
如果(
this.contact.businessName&&
这个联系人&&
这是我的联系电话&&
这是我的联系地址&&
this.contact.selectedCategory
) {
返回true；
}
this.errors=[]；
如果（！this.contact.businessName）{
此.errors.push（“需要企业名称”）；
}
如果（！this.contact.contactPerson）{
此。错误。推送（“需要联系人”）；
}
如果（！this.contact.contactNumber）{
此。错误。推送（“需要联系电话”）；
}
如果（！this.contact.address）{
此.errors.push（“需要地址”）；
}
如果（！this.contact.selectedCategory）{
此.errors.push（“所需类别”）；
}
}
}
};

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>

联系方式摘要
斯诺#
企业名称
联系人
地址
联系电话
类别
{{index}}
{{contact.businessName}}
{{contact.contactPerson}
{{contact.address}
{{contact.contactNumber}
{{contact.selectedCategory}
未找到任何记录
导出默认值{
数据（）{
返回{
联系人：{
businessName:null，
联系人：空，
地址：空，
联系人号码：空，
selectedCategory:空
}
}
},
道具：[“联系人”]
}

在

组件A

中，您有从

组件C

传递的

联系人

，在

组件C

中，您将

联系人

数组设置为默认值

contacts:[ {
        businessName: null,
        contactPerson: null,
        address: null,
        contactNumber: null,
        selectedCategory: null
      }],

---

因此，

联系人的长度

为1

v-for

您设置的渲染默认值

为什么不使用vuex在组件之间共享数据？@Mohsen我是vuejs的新手，我肯定会探索这一点。但我不确定这里出了什么问题。

contacts:[ {
        businessName: null,
        contactPerson: null,
        address: null,
        contactNumber: null,
        selectedCategory: null
      }],