代码之家 › 专栏 › 技术社区 › JamMan9

使用Vue.JS删除多维数组中的值

javascript

JamMan9 · 技术社区 · 6 年前

早上好,

单击“新建项目”按钮时,会在相关部分中添加一个新的文本字段。如果单击“新建节”按钮,则会创建一个新节。单击节右上角的“X”时,该节将成功删除。但是,我正在尝试实现每个“Addition”文本字段下面(右侧)的“X”。我想,这将是添加一个额外的文本字段的反向代码,但是使用splice()函数。但是这不起作用。

我的代码如下,任何帮助将不胜感激。

var app = new Vue({
  el: '.container',
  data: {
    sections: [{
      item: '',
      additionals: []
    }]

  },
  methods: {
    addNewSection() {
      this.sections.push({
        item: '',
        additionals: []
      })
    },
    addNewItem(id) {
      this.sections[id].additionals.push({
        item: ''
      })
    }
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app">
  <div class="container">
    <button class="btn btn-success mt-5 mb-5" @click="addNewSection">
                New Deal Section
            </button>

    <div class="card mb-3" v-for="(section, index) in sections">
      <hr>
      <div class="card-body">
        <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)">
                        New Item
                    </button>

        <span class="float-right" style="cursor:pointer">
                        X
                    </span>

        <h4 class="card-title">Deal section {{ index + 1}}</h4>

        <div class="employee-form" v-for="(addition, index) in section.additionals">
          <input type="text" class="form-control mb-2" placeholder="Item" v-model="addition.item">
        </div>

        <div class="employee-form">
          <input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item">
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/qs6t9L7x/8/

1 回复 | 直到 6 年前

George 6 年前

你的问题是这个 this.sections[index].additionals[indexSection].splice(indexSection,1)

把它改成 this.sections[index].additionals.splice(indexSection,1) 它工作得很好

var app = new Vue({
  el: '.container',
  data: {
    sections: [{
      item: '',
      additionals: [] // <-
    }]

  },
  methods: {
    addNewSection() {
      this.sections.push({
        item: '',
        additionals: [] // <-
      })
    },
    addNewItem(index) {
      this.sections[index].additionals.push({
        item: ''
      })
    },
    deleteSection(index) {
      this.sections.splice(index, 1)
    },
    deleteAdditional(index, indexSection) {
      console.log(index, indexSection)
      //this.sections[index].additionals.splice(index,1)
      this.sections[index].additionals.splice(indexSection, 1)
    }
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app">
  <div class="container">
    <button class="btn btn-success mt-5 mb-5" @click="addNewSection">
                        New Deal Section
                    </button>

    <div class="card mb-3" v-for="(section, index) in sections">
      <hr>
      <div class="card-body">
        <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)"> <!-- passing the index -->
                                New Item
                            </button>

        <span class="float-right" style="cursor:pointer" @click="deleteSection(index)">
                                X
                            </span>

        <h4 class="card-title">Deal section {{ index + 1}}</h4>

        <div class="employee-form">
          <input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item">
        </div>

        <div class="employee-form" v-for="(addition, indexSection) in section.additionals">
          <!-- additionals of the section -->

          <input type="text" class="form-control mb-2" placeholder="Addition" v-model="addition.item">

          <span class="float-right" style="cursor:pointer" @click="deleteAdditional(index,indexSection)">
                                    X
                                </span>
        </div>
      </div>
    </div>
  </div>
</div>