0

Есть массив с todo листом. Мне нужно, чтобы при нажатии на кнопку удаления у меня находился индекс элемента массива, который пользователь хочет удалить через цикл. Заранее извиняюсь, если код выглядит плохо. Я только начинаю программировать. Писал код на vue js.

var app = new Vue({
  el: '#app',
  data() {
    return {
      name: "",
      count: 0,
      list: [{
          id: 1,
          body: 'Покушать'
        },
        {
          id: 2,
          body: 'Сходить в магазин'
        }
      ]
    }
  },
  methods: {
    create() {
      const newList = {
        id: Date.now(),
        body: this.name
      }
      this.list.push(newList);
      this.name = ''
    }
  }
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.todolist {
  margin: 15px;
  padding: 10px;
  border: 2px solid orangered;
}

.input {
  border: 3px solid rgb(235, 165, 104);
  margin: 5px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.del {
  border: 2px solid orangered;
  padding: 5px;
  margin: 5px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
}

.create {
  border: 2px solid rgb(52, 194, 52);
  padding: 5px;
  margin: 5px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form @submit.prevent>
    <input v-model="name" type="text" placeholder="Введите задачу" class="input"> <br> <br>
    <button @click="create()" class="create">Создать</button> <br>
    <button class="del">Удалить</button>
  </form>
  <div class="todolist" v-for="(todolist,index,) in list">
    <div>
      Название: {{ todolist.body }}
    </div>
  </div>
</div>

3
  • Можно в div записать в атрибут data-id...
    – ksa
    11 мая в 5:45
  • Скорее всего, проблема в том, что кнопка удаления расположена в неудачном месте. Сколько действий пользователь должен сделать, чтобы удалить задачу? 1. Выбрать задачу, 2. нажать на кнопку вызова всплывающей формы, 3. нажать на кнопку удаления на форме. Многовато. 11 мая в 10:58
  • Для того, чтобы удалить элемент, нужно сперва его отметить (как-то выбрать) сейчас список выводится просто в div. Думаю логичнее кнопку удалить сделать рядом с каждым элементом списка, и в эту кнопку записывайте id. А потом создайте метод для удаления 11 мая в 11:45

1 ответ 1

1

Как получить индекс элемента массива?

Например вот так...

var app = new Vue({
  el: '#app',
  data() {
    return {
      name: "",
      count: 0,
      select: null,
      list: [{
          id: 1,
          body: 'Покушать'
        },
        {
          id: 2,
          body: 'Сходить в магазин'
        }
      ]
    }
  },
  methods: {
    on(i) {
      if (this.select === i) i = null
      this.select = i
    },
    del() {
      if (this.select == null) return
      this.list.splice(this.select, 1)
      this.select = null
    },
    create() {
      const newList = {
        id: Date.now(),
        body: this.name
      }
      this.list.push(newList);
      this.name = ''
    }
  }
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.todolist {
  margin: 15px;
  padding: 10px;
  border: 2px solid orangered;
}
.todolist .on{
  border: 1px solid green;
}

.input {
  border: 3px solid rgb(235, 165, 104);
  margin: 5px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.del {
  border: 2px solid orangered;
  padding: 5px;
  margin: 5px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
}

.create {
  border: 2px solid rgb(52, 194, 52);
  padding: 5px;
  margin: 5px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form @submit.prevent>
    <input v-model="name" type="text" placeholder="Введите задачу" class="input"> <br> <br>
    <button @click="create()" class="create">Создать</button> <br>
    <button @click="del()" class="del">Удалить</button>
  </form>
  <div class="todolist" v-for="(todolist,index,) in list">
    <div @click="on(index)" v-bind:class="{ on: select === index }">
      Название: {{ todolist.body }}
    </div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.