I've been working on creating a sleek note-taking app and currently, I am focusing on the functionality of the NoteItem component. This component consists of two buttons: one for editing a note and another for deleting it. The delete button is working perfectly fine, but I'm facing an issue with the edit button. When it triggers the startRedacting() function, the redacting variable remains unchanged, which means that the v-else block is not being rendered.
NoteItem.vue:
<script setup lang="ts">
import axios from "axios";
const props = defineProps(['title', 'content', 'note_id']);
let redacting = undefined;
let redTitle = props.title;
let redContent = props.content;
const deleteNote = async () => {
await axios.delete(`http://localhost:3000/notes/${props.note_id}`)
.then((res) => {
if (res.status === 204) {
location.reload()
}
else {
console.log(`HTTP STATUS ${res.status}`)
}
})
}
const startRedacting = () => {
redacting = true
}
const redactNote = async () => {
await axios.put(`http://localhost:3000/notes/${props.note_id}`, {
Title: redTitle,
Content: redContent
})
.then((res) => {
if (res.status === 200) {
redacting = false
location.reload()
}
else {
console.log(`HTTP STATUS ${res.status}`)
}
})
}
</script>
<template>
<div class="flex flex-row justify-between border-2 border-r-6 border-gray-200 p-3 rounded-md">
<div class="flex w-2.5 h-full bg-red-500 rounded-3xl resize-none flex-none" id="strip">
<!--Poloska-->
</div>
<div v-if="!redacting" class="flex flex-col ml-8 text-wrap justify-self-start justify-start">
<div id="title" class="text-xl justify-self-center text-left">
{{ title }}
</div>
<div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
{{ content }}
</div>
</div>
<div v-else>
<div class="flex flex-col ml-8 text-wrap justify-self-start justify-start pr-2">
<div class="text-xl justify-self-center text-left">
<input type="text" v-model="redTitle" class="border-2 border-gray-200 rounded-md p-2 w-full">
</div>
<div id="content" class="pt-4 text-pretty h-max truncate justify-self-start text-left">
<textarea v-model="redContent" class=" border-2 border-gray-200 rounded-md p-2 w-full"></textarea>
</div>
<button class="size-8 hover:shadow-neutral-300 hover:bg-green-700 rounded-lg justify-center w-full bg-green-600" @click="redactNote">
<div class="text-white">Done</div>
</button>
</div>
</div>
<div class="flex flex-col">
<button class="size-8 hover:shadow-neutral-300 hover:bg-neutral-200 rounded-lg" @click="startRedacting">
<img src="../assets/pencil.svg" alt="" class="justify-self-center">
</button>
<button class="size-8 hover:shadow-neutral-300 hover:bg-red-400 rounded-lg mt-2" @click="deleteNote">
<img src="../assets/trash-svgrepo-com.svg" alt="" class="pt-1">
</button>
</div>
</div>
</template>
<style scoped>
</style>