首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法为Vuejs中的嵌套数组添加表单

无法为Vuejs中的嵌套数组添加表单
EN

Stack Overflow用户
提问于 2018-06-05 02:58:42
回答 2查看 66关注 0票数 0

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

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个部分和项目硬编码用于测试。我能够成功地循环和显示部分和嵌套项。我在addNewItemdeleteItem上遇到了问题。如果我得到了添加项目的帮助,我就可以解决删除问题。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-05 08:01:25

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

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
EN

Stack Overflow用户

发布于 2018-06-05 04:52:21

我不确定,但我认为问题出在addNewItem函数中,以及deleteItem中。当您拥有sectionS数组时,您正在将其推送到段并从段中拼接。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50687116

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档