需要帮助重构我的 vuejs 代码。错误 v-on 处理程序："TypeError: Cannot read property 'products' of undefined"

Question

有人建议我应该使用bootstrap vue，因为我将bootstrap 4和vue一起使用；我相信我为laravel安装了bootstrap vue是正确的。

我的目标：我使用VueJS 2.6.11和bootstrap 4创建了两个动态部分(Category和Product(，其中包含div和输入字段。产品部分嵌套在类别部分中。当有人单击"新建类别"按钮时，应该会生成另一个类别。当有人单击"新建产品"按钮时，也应该发生同样的行为，应该生成另一个"产品"部分，但仅在当前类别部分内。

当我点击新产品按钮时，我收到以下错误：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'products' of undefined"
found in
---> <CreateProductAndCategory> at resources/js/components/admin/CreateProductAndCategory.vue
<Dashboard> at resources/js/views/admin/DashBoard.vue
<App> at resources/js/components/App.vue
<Root>

原始代码：

var app = new Vue({
el: ".container",
data: {
categories: [{
name: "",
products: [{
name: ""
}]
}]
},
methods: {
addNewCategoryForm() {
this.categories.push({
name: "",
products: []
});
},
deleteCategoryForm(index) {
this.categories.splice(index, 1);
},
addNewProductForm(index) {
this.categories[index].products.push({
name: ""
});
},
deleteProductForm(categoryIndex, index) {
this.categories[categoryIndex].products.splice(index, 1);
}
}
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Create Categories and Products</title>
<div class="container">
<!-- New Category -->
<button class="btn btn-success mt-5 mb-5" @click="addNewCategoryForm">
New Category
</button>
<div class="card mb-3" v-for="(category, catIndex) in categories">
<div class="card-body">
<span class="float-right" style="cursor:pointer" @click="deleteCategoryForm">
X
</span>
<h4 class="card-title">Add Category</h4>
<div class="category-form">
<input type="text" class="form-control mb-2" placeholder="Category Name" v-model="category.name">
</div>
<!-- New Product -->
<button class="btn btn-success mt-5 mb-5" @click="addNewProductForm(catIndex)">
New Product
</button>
<div class="card mb-3" v-for="(product, index) in category.products">
<div class="card-body">
<span class="float-right" style="cursor:pointer" @click="deleteProductForm(catIndex, index)">
X
</span>
<h4 class="card-title">Add Product</h4>
<div class="product-form">
<input type="text" class="form-control mb-2" placeholder="Product Name" v-model="product.name">
</div>
</div>
</div>
</div>
</div>
</div>

重构代码(我收到错误的代码(：

<template>
<div>
<!-- New Category -->
<b-button variant="success" class="mt-1 mb-2"
@click="addNewCategoryForm">
New Category
</b-button>
<b-card class="mb-3" v-for="(category, catIndex) in categories">
<span class="float-right"
style="cursor:pointer"
@click="deleteCategoryForm">
X
</span>
<h4 class="card-title">Add Category</h4>
<div class="category-form">
<input 
type="text"
class="form-control mb-2"
placeholder="Category Name"
v-model="category.name">
</div>
<!-- New Product -->
<b-button variant="success" class="mt-2 mb-2"
@click="addNewProductForm">
New Product
</b-button>
<b-card class="mb-3" v-for="(product, index) in category.products">
<span class="float-right" 
style="cursor:pointer"
@click="deleteProductForm">
X
</span>
<h4 class="card-title">Add Product</h4>
<div class="product-form">
<input 
type="text" 
class="form-control mb-2" 
placeholder="Product Name"
v-model="product.name">
</div>
</b-card>
</b-card>
</div>
</template>
<script>
export default {
name: "create-product-and-category",
data: () => {
return {
categories: [{
name: "",
products: [{
name: ""
}]
}]
}
},
methods: {
addNewCategoryForm() {
this.categories.push({
name: "",
products: []
});
},
deleteCategoryForm(index) {
this.categories.splice(index, 1);
},
addNewProductForm(index) {
this.categories[index].products.push({
name: ""
});
},
deleteProductForm(categoryIndex, index) {
this.categories[categoryIndex].products.splice(index, 1);
}
}
}
</script>
<style scoped>
</style>

Answer 1

我解决了我的问题。复制和粘贴时我需要更加注意。

这是正确的代码片段：

<!-- New Product -->
<b-button variant="success" class="mt-2 mb-2"
@click="addNewProductForm(catIndex)">
New Product
</b-button>
<b-card class="mb-3" v-for="(product, index) in category.products">
<span class="float-right" 
style="cursor:pointer"
@click="deleteProductForm(catIndex, index)">
X
</span>