我正在尝试为嵌套数组添加表单输入。我可以循环显示硬编码的项目到页面，但是当我添加一个表单添加到数组时，我得到一个空白的屏幕。
addNewSection
<form v-on:submit.prevent="addNewSection">
<div class="form-group m-form__group">
<input v-model="sections.name" placeholder="Name" class="form-control m-input" style="margin-bottom: .5rem"/>
<textarea v-model="sections.description" placeholder="Description" class="form-control m-input" style="margin-bottom: .5rem"/></textarea>
<button type="submit" class="btn btn-primary">Add Section</button>
</div>
</form>
addNewItem
<form v-on:submit="addNewItem">
<div class="form-group m-form__group">
<input v-model="sections.items.name" placeholder="Name" class="form-control m-input" style="margin-bottom: .5rem"/>
<textarea v-model="sections.items.description" placeholder="Description" class="form-control m-input" style="margin-bottom: .5rem"/></textarea>
<button type="submit" class="btn btn-primary">Add Section</button>
</div>
</form>
脚本
new Vue({
el: "#main",
data: {
sections: [
{
name: "Salad",
description: 'Add chicken to any salad for $3.00',
items: [
{
name: 'Antipasto',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
price: '$13.00'
},
{
name: 'Basic',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette.',
price: '$5.00 / $7.50'
},
{
name: 'Caesar',
description: 'Romaine, Caesar dressing, croutons, shaved parmesan',
price: '$5.00 / $7.50'
}
]
},
{
name: "Sandwiches",
description: 'Add cheese to any salad for $3.00',
items: [
{
name: 'Sandwich 1',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
price: '$13.00'
},
{
name: 'Sandwich 2',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette.',
price: '$5.00 / $7.50'
},
{
name: 'Sandwich 3',
description: 'Romaine, Caesar dressing, croutons, shaved parmesan',
price: '$5.00 / $7.50'
}
]
},
{
name: "Pizzas",
description: 'Add Pepperonis to any salad for $3.00',
items: [
{
name: 'Pizza 1',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
price: '$13.00'
},
{
name: 'Pizza 2',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette.',
price: '$5.00 / $7.50'
},
{
name: 'Pizza 3',
description: 'Romaine, Caesar dressing, croutons, shaved parmesan',
price: '$5.00 / $7.50'
}
]
}
]
},
methods: {
deleteSection: function (index) {
this.sections.splice(index, 1);
},
addNewSection(e) {
this.sections.push(
{
name: this.sections.name,
description: this.sections.description
}
);
this.sections.name = "";
this.sections.description = "";
e.preventDefault();
},
addNewItem(e) {
this.section.items.push(
{
name: this.section.items.name,
description: this.section.items.description
}
);
this.section.items.name = "";
this.section.items.description = "";
e.preventDefault();
},
deleteItem: function (index) {
this.section.items.splice(index, 1);
},
}
});
</script>
如果你看一下上面的代码，我有3个部分和项目硬编码用于测试。我能够循环并成功显示部分和嵌套项。 addNewItem和deleteItem我遇到了问题。如果我获得添加项目的帮助，我可以找出删除。
答案 0 :(得分：1)
以下是添加和删除部分和项目的完整工作示例。
console.clear()
new Vue({
el: "#main",
data: {
sectionName: '',
sectionDescription: '',
itemName: '',
itemDescription: '',
selectedSection: null,
sections: [
{
name: "Salad",
description: 'Add chicken to any salad for $3.00',
items: [
{
name: 'Antipasto',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
price: '$13.00'
},
{
name: 'Basic',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette.',
price: '$5.00 / $7.50'
},
{
name: 'Caesar',
description: 'Romaine, Caesar dressing, croutons, shaved parmesan',
price: '$5.00 / $7.50'
}
]
},
{
name: "Sandwiches",
description: 'Add cheese to any salad for $3.00',
items: [
{
name: 'Sandwich 1',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
price: '$13.00'
},
{
name: 'Sandwich 2',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette.',
price: '$5.00 / $7.50'
},
{
name: 'Sandwich 3',
description: 'Romaine, Caesar dressing, croutons, shaved parmesan',
price: '$5.00 / $7.50'
}
]
},
{
name: "Pizzas",
description: 'Add Pepperonis to any salad for $3.00',
items: [
{
name: 'Pizza 1',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette',
price: '$13.00'
},
{
name: 'Pizza 2',
description: 'Mixed greens, Italian meats, cheeses, giardiniera pickled veggies, tomatoes, roasted peppers, onions with house Italian vinaigrette.',
price: '$5.00 / $7.50'
},
{
name: 'Pizza 3',
description: 'Romaine, Caesar dressing, croutons, shaved parmesan',
price: '$5.00 / $7.50'
}
]
}
]
},
methods: {
deleteSection: function (section) {
this.sections.splice(this.sections.findIndex(s => s === section), 1);
},
addNewSection() {
this.sections.push({
name: this.sectionName,
description: this.sectionDescription,
items:[]
})
},
addNewItem() {
const section = this.sections.find(s => s.name === this.selectedSection)
section.items.push({
name: this.itemName,
description: this.itemDescription
})
},
deleteItem: function (section, item) {
section.items.splice(section.items.findIndex(i => i === item), 1)
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="main">
<ul>
<li v-for="section in sections" :key="section.name">
{{section.name}} <a href="#" @click="deleteSection(section)">Delete</a>
<ul>
<li v-for="item in section.items" :key="item.name">
{{item.name}}
<a href="#" @click="deleteItem(section, item)">Delete</a>
</li>
</ul>
</li>
</ul>
<hr>
<h1>Add New Section</h1>
<form v-on:submit.prevent="addNewSection">
<div>
<input v-model="sectionName" placeholder="Name" /><br>
<textarea v-model="sectionDescription" placeholder="Description" ></textarea><br>
<button type="submit" class="btn btn-primary">Add Section</button>
</div>
</form>
<h1>Add New Item</h1>
<form v-on:submit.prevent="addNewItem">
<div>
<select v-model="selectedSection">
<option v-for="section in sections" :value="section.name">{{section.name}}</option>
</select><br>
<input v-model="itemName" placeholder="Name" /><br>
<textarea v-model="itemDescription" placeholder="Description"></textarea><br>
<button type="submit" class="btn btn-primary">Add Section</button>
</div>
</form>
</div>
答案 1 :(得分：0)
我不确定，但我认为问题出在addNewItem函数以及deleteItem中。当你有sectionS数组时，你正在将它推到并从段中拼接。