Merhabalar hocalarım benim bir sorum olacaktı. Vue JS ile bir ToDo App projesi üzerine çalışıyorum. Sorum şuydu; mongodb ye bağladığım api kodunda sanırsam bir sorun bulunuyor ama ben bir türlü bulamadım. Veriye axios ile post, delete veya put istekleri attığımda işlem database için çalışıyor fakat frontend tarafında anlık bir değişim olmuyor. Ayrıca istekleri atınca konsola şu hatayı basıyor;
siteyi yenilediğimde verilerin güncel hali karşıma çıkıyor fakat ben bu değişimlerin anlık olmasını istiyorum.
App.vue kodunda pek bir hata bulamadım fakat araştırmama göre yazdığım api da sıkıntı olabilirmiş. Ben hatayı bulamadım yardımcı olursanız sevinirim. Ayrıca lazımolur diye hem App.vue hem de yazdığım API kodlarını ekledim. şimdiden teşekkürler.
App.vue Kodları
<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted, onUpdated } from 'vue'
import Navbar from './components/Navbar.vue'
const items = ref([])
const description = ref('')
const editedDescription = ref('')
const selected = ref({})
async function getItems() {
const response = await axios.get("api/bucketListItems/")
items.value = response.data
}
onMounted(async () => {
await getItems()
})
async function addItem() {
const response = await axios.post("api/bucketListItems/", {
description: description.value
})
this.items.push(response.data)
description = ""
}
async function removeItem(item, i) {
await axios.delete("api/bucketListItems/" + item._id)
items.splice(i)
}
function select(item) {
selected.value = item
editedDescription.value = item.description
}
function unselect() {
selected.value = {}
editedDescription = ""
}
async function updateItem(item, i) {
const response = await axios.put("api/bucketListItems/" + item._id, {
description: editedDescription.value
})
items[i] = response.data
unselect()
}
const toggle = () => {
var icon = document.getElementById('icon')
if(document.body.classList.contains("light")){
document.body.classList.remove("light")
icon.setAttribute('class', 'bi bi-moon-fill')
} else {
document.body.classList.add("light")
icon.setAttribute('class', 'bi bi-sun-fill')
}
}
</script>
<template>
<Navbar @toggle="toggle()"/>
<div class="app">
<div class="addItem">
<input type="text" class="input" v-model="description" placeholder="Go to Mars..." />
<button type="button" class="button" name="button" @click="addItem" :disabled="!description">
<i class="bi bi-plus-lg" ></i>
</button>
</div>
<div class="notes">
<div class="items" v-for="(item, i) in items" :key="item._id">
<p>
<input type="text" v-if="item._id === selected._id" v-model="editedDescription" />
<span v-else>
<span class="number" id="number"> {{ i+1 }} </span>
<span class="description"> {{ item.description }} </span>
</span>
<span class="icons">
<span class="pencil" @click="item._id === selected._id ? unselect() : select(item)">
<i id="pencil" :class="item._id != selected._id ? 'bi bi-pencil-fill' : 'bi bi-x-lg' "></i>
</span>
<span class="remote" @click="item._id === selected._id ? updateItem(item, i) : removeItem(item, i)">
<i :class="item._id != selected._id ? 'bi bi-trash-fill' : 'bi bi-hdd-fill' "></i>
</span>
</span>
</p>
<hr>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import '../public/App.scss';
</style>
bucketListItems.js Kodları
const { Router } = require('express')
const BucketListItem = require('../../models/BucketListItem')
const router = Router()
router.get('/', async (req, res) => {
try {
const bucketListItems = await BucketListItem.find()
if (!bucketListItems) throw new Error('No bucketListItems')
const sorted = bucketListItems.sort((a, b) => {
return new Date(a.date).getTime() - new Date(b.date).getTime()
})
res.status(200).json(sorted)
} catch (error) {
res.status(500).json({ message: error.message })
}
})
router.post('/', async (req, res) => {
const newBucketListItem = new BucketListItem(req.body)
try {
const bucketListItem = await newBucketListItem.save()
if (!bucketListItems) throw new Error('Something went wrong saving the bucketListItem')
res.status(200).json(bucketListItem)
} catch (error) {
res.status(500).json({ message: error.message })
}
})
router.put('/:id', async (req, res) => {
const { id } = req.params
try {
const response = await BucketListItem.findByIdAndUpdate(id, req.body)
if (!response) throw Error('Something went wrong...')
const update = { ...response._doc, ...req.body }
res.status(200).json(updated)
} catch (error) {
res.status(500).json({ message: error.message })
}
})
router.delete('/:id', async (req, res) => {
const { id } = req.params
try {
const removed = await BucketListItem.findByIdAndDelete(id)
if (!removed) throw Error('Something went wrong...')
res.status(200).json(updated)
} catch (error) {
res.status(500).json({ message: error.message })
}
})
module.exports = router
Yardımcı olursanız sevinirim...
