需要帮助重构我的vuejs代码。错误的v-on处理程序：“ TypeError：无法读取未定义的属性'products'”

Question

有人建议我同时使用bootstrap-vue，因为我同时使用bootstrap 4和vue；我相信我已经为laravel正确安装了bootstrap-vue。

我的目标：我正在使用VueJS 2.6.11和bootstrap 4创建两个包含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/[email protected]/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>

有人建议我同时使用bootstrap-vue，因为我同时使用bootstrap 4和vue；我相信我为Laravel正确安装了bootstrap-vue。我的目标：我正在使用VueJS 2.6.11和...

Answer 1

我已解决问题。复制和粘贴时，我需要格外注意。