Для перемещения элемента в блоке вверх по клику во фреймворке Vue.js, вам необходимо использовать директиву v-on для прослушивания события клика и методы для изменения данных, которые затем будут отражены в пользовательском интерфейсе.
Ниже приведен пример кода, демонстрирующий, как перемещать элемент вверх по клику в Vue.js:
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<span>{{ item }}</span>
<button @click="moveUp(index)" v-if="index > 0">Move Up</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
},
methods: {
moveUp(index) {
if (index > 0) {
const temp = this.items[index - 1];
this.$set(this.items, index - 1, this.items[index]);
this.$set(this.items, index, temp);
}
}
}
};
</script>
В этом примере у нас есть массив items, который хранит элементы для отображения. Мы используем директиву v-for для отображения каждого элемента в массиве в блоке. Для каждого элемента, кроме первого, показывается кнопка "Move Up", которая при нажатии вызывает метод moveUp(index). Этот метод меняет местами элемент на текущей позиции и предыдущий элемент в массиве.
Приложение Vue автоматически обновляет отображение при изменении данных, поэтому после нажатия кнопки "Move Up" элемент перемещается вверх в пользовательском интерфейсе.
Надеюсь, это объяснение было полезным! Если у вас возникли дополнительные вопросы, не стесняйтесь задавать.