49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<script setup>
|
|
import treeview from "vue3-treeview";
|
|
import "vue3-treeview/dist/style.css";
|
|
|
|
import { toRef, watch, reactive, watchEffect } from 'vue'
|
|
|
|
const props = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:block']);
|
|
|
|
// Work directly with a reactive reference to the parent block
|
|
const local = toRef(props, 'block');
|
|
|
|
// Optionally: auto-emit updated block on change (if needed elsewhere)
|
|
watch(local, (val) => {
|
|
emit('update:block', val);
|
|
}, { deep: true });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<div class="mb-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Anker navn (DOM ID)</label>
|
|
<input
|
|
type="text"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
|
|
v-model="local.anchorName"
|
|
/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel</label>
|
|
<input
|
|
type="text"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
|
|
v-model="local.title"
|
|
@input="update"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |