Javascript vuejs中的动态表单时髦行为

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

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

问题:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

当有人单击“新产品”按钮时，将在所有当前类别部分中生成“添加产品”部分。此外，v-model似乎绑定到每个产品名称输入。当有人单击特定产品部分的X按钮时，一个产品部分将从所有当前类别部分中删除

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

我不太清楚为什么会这样

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

代码笔：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

代码：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

创建类别和产品

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

新类别
X
添加类别
新产品
X
添加产品
var app=新的Vue({
el:“.container”，
数据：{
类别：[
{
名称：“”，
}
],
产品：[
{
名称：“”，
}
]
},
方法：{
addNewCategoryForm（）{
这是推({
名称：“”，
});
},
deleteCategoryForm（索引）{
这是一个类别。拼接（索引，1）；
},
addNewProductForm（）{
这是我的产品({
名称：“”，
});
},
deleteProductForm（索引）{
本标准。产品。拼接（索引，1）；
},
}
});

---

一般的问题是您没有指定哪些产品属于哪个类别。因此，在您当前的代码中，所有产品都属于所有类别

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

我建议将产品嵌套在category对象中

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title>Create Categories and Products</title>

var-app=新的Vue({
el:“集装箱”，
数据：{
类别：[{
姓名：“，
产品：[{
姓名：“
}]
}]
},
方法：{
addNewCategoryForm（）{
这是推({
姓名：“，
产品：[]
});
},
deleteCategoryForm（索引）{
这是一个类别。拼接（索引，1）；
},
addNewProductForm（索引）{
此.categories[index].products.push({
姓名：“
});
},
deleteProductForm（类别索引，索引）{
this.categories[categorinIndex].products.splice（索引，1）；
}
}
});

创建类别和产品
新类别
X
添加类别
新产品
X
添加产品
副业注释。如果您计划将引导与Vue结合使用，我强烈建议您使用。他们将所有组件重新制作为vue兼容，所以您不需要使用jQuery。他们也有自定义组件，比如日期选择器和数据表。我一定会尝试一下Bootstrap Vue。我正在用Laravel 6构建我的项目。我是否需要对Laravel进行不同的设置才能使用Bootstrap Vue？我还没有使用Laravel，所以我不能100%确定。但是，导入并将其添加到Vue实例应该是一个简单的例子。如果您选择使用
SCSS
，您可能需要进行一些额外的设置，以便它能够正确编译。您可能会在这篇文章中找到答案。我离开一会儿，想一想我应该做什么。我意识到我应该将product对象嵌套在category对象中。然后，我尝试重构代码，看看是否能解决这个问题，但你把我推到了终点：-）