Как сделать так, чтобы определённый элемент перемещался?

Question

[Ivan_Bachantcev]

Есть следующий код

<div id="app">
<div class='text_field_1'>
<input type='text'>
<button>вверх</button>
<div>
<div class='text_field_2'>
<input type='text'>
<button>вверх</button>
<div>
</div>

Вопрос такой: как при помощи Vue сделать возможность перемещения text_field_1 и text_field_2 с сохранением в них введённых значений?

Answer 1

[0xD34F]

Так, что ли:

data: () => ({
  items: [...Array(5).keys()],
}),
methods: {
  move(index, step) {
    const items = [...this.items];
    const newIndex = Math.min(items.length - 1, Math.max(0, index + step));
    [ items[index], items[newIndex] ] = [ items[newIndex], items[index] ];
    this.items = items;
  },

  // или

  move(index, step) {
    const { items } = this;
    const newIndex = Math.min(items.length - 1, Math.max(0, index + step));
    items.splice(index, 1, items.splice(newIndex, 1, items[index])[0]);
  },

  // или

  move(index, step) {
    const newIndex = Math.min(this.items.length - 1, Math.max(0, index + step));
    if (index !== newIndex) {
      const val = this.items[index];
      this.$set(this.items, index, this.items[newIndex]);
      this.$set(this.items, newIndex, val);
    }
  },
},

<div v-for="(n, i) in items">
  <input v-model="items[i]">
  <button @click="move(i, -1)">вверх</button>
  <button @click="move(i, +1)">вниз</button>
</div>

??

Comments

[Ivan_Bachantcev]

Да, так, а можешь сказать что где происходит? Я примерно понимаю что, но хотелось бы услышать объяснение человека, сделавшего это. Просто я новичок в vue и хотел бы разобраться

[0xD34F]

Ivan_Bachantcev, что КОНКРЕТНО вам непонятно?

Ну и это, не могу не поинтересоваться - вы документацию пробовали открывать? Там всё есть. Даже на русском языке.

[Ivan_Bachantcev]

Я открывал документацию, руководство по крайней мере читал. Там таких примеров я не находил. Хотя да, лучше сам разберусь). Спасибо

[0xD34F]

Ivan_Bachantcev,

Я открывал документацию, руководство по крайней мере читал. Там таких примеров я не находил.

Если вы откроете учебник арифметики, то вы там тоже не найдёте демонстрации того, как складывать 21736454874234 и 9099714556934. Разумеется, никто нигде и никогда не будет разъяснять все возможные частные случаи - их бесконечное количество. Есть общие принципы, они изложены. Непонятно? Значит, рано ещё за такое браться. Надо получше js освоить, например.