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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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