WedX - журнал о программировании и компьютерных науках

Удаление значения внутри многомерного массива с помощью Vue.JS

Доброе утро,

У меня есть следующая форма:

введите здесь описание изображения

Когда вы нажимаете кнопку «Новый элемент», в соответствующий раздел добавляется новое текстовое поле. Если вы нажмете кнопку «Новый раздел», будет создан новый раздел. Когда вы нажимаете «X» в правом верхнем углу раздела, раздел успешно удаляется. Тем не менее, я пытаюсь реализовать «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/

02.10.2018

  • When you click the 'X' in the top right of the section, the section successfully deletes. он не удаляется в вашей скрипке:/ 02.10.2018
  • Пожалуйста, включите весь свой код в свою скрипку, даже код, который не работает. 02.10.2018
  • Извинения. Не уверен, что случилось с jsfiddle. я обновил его 02.10.2018
  • @JamLis this.sections[index].additionals.splice(indexSection,1) не this.sections[index].additionals[indexSection].splice(indexSection,1) ???? 02.10.2018
  • @Джордж Спасибо! Вы хотите ответить на вопрос, чтобы я мог отметить его? 02.10.2018

Ответы:


1

Ваша проблема в том, что this.sections[index].additionals[indexSection].splice(indexSection,1)

Вы вызываете spice для объекта, а не для массива!

измените его на 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>

02.10.2018
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]