How do I get the current DOM value of useTemplateRef() ?
I have this code and the watchEffect doesn't log everytime I dran an element.
Is it possible to get the value of the current DOM after dragging the arrangement of the element?
Is it possible to get the value of the current DOM after dragging the arrangement of the element?
<script setup lang="ts">
import { ref } from "vue";
import Sortable from "sortablejs";
// Reference to the list element
const itemsRef = useTemplateRef<HTMLElement | null>("items");
const list = ref(["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]);
onMounted(() => {
if (itemsRef.value) {
// Initialize Sortable on the list element
Sortable.create(itemsRef.value, {
animation: 150,
ghostClass: "sortable-ghost",
group: "shared",
});
}
watchEffect(() => {
console.log(itemsRef.value);
});
});
</script>
<template>
<ul id="items" ref="items">
<li v-for="item in list">
{{ item }}
</li>
</ul>
</template>
<style scoped></style><script setup lang="ts">
import { ref } from "vue";
import Sortable from "sortablejs";
// Reference to the list element
const itemsRef = useTemplateRef<HTMLElement | null>("items");
const list = ref(["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]);
onMounted(() => {
if (itemsRef.value) {
// Initialize Sortable on the list element
Sortable.create(itemsRef.value, {
animation: 150,
ghostClass: "sortable-ghost",
group: "shared",
});
}
watchEffect(() => {
console.log(itemsRef.value);
});
});
</script>
<template>
<ul id="items" ref="items">
<li v-for="item in list">
{{ item }}
</li>
</ul>
</template>
<style scoped></style>
