代码之家 › 专栏 › 技术社区 › Charles Smith

无法为vuejs中的嵌套数组添加窗体

vue.js

0

Charles Smith · 技术社区 · 8 年前

我正在尝试为嵌套数组添加表单输入。我可以循环显示硬编码项到页面,但是当我添加一个表单到数组中时,我得到一个空白屏幕。

添加新闻节

<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>

附加新项目

<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 我有问题。如果我得到了添加项的帮助,我可以计算出删除。

2 回复 | 直到 8 年前

1

Bert Jeffrey Shen 8 年前

下面是添加和删除节和项的完整工作示例。

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>

2

0

A. Domeika 8 年前

我不确定,但我认为问题出在addnewitem函数和deleteeitem中。当您有区段数组时,您正在将其推送到区段并从区段进行拼接。