Merhaba değerli hocalarım bir Todo List uygulaması üzerinde çalışıyorum. İlk başlarda veri eklediğimde kod bazı hatalar veriyor olsa da çalışıyordu fakat 18. veriden sonra veri eklememeye başladı. Ben de MongoDB Collection üzerinden verileri sildim fakat yine çalışmadı. İlk önce onMounted esnasında bir problem çıkıyor sanmıştım fakat şu an pek de emin değilim açıkçası. Yardımcı olursanız sevinirim 😀
App.vue kodları
<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import Navbar from './components/Navbar.vue'
const items = ref([])
const description = ref('')
onMounted(async () => {
const response = await axios.get("/api/bucketListItems/")
items.value = response.data
})
async function addItem() {
const response = await axios.post('api/bucketListItems/', { description: description })
items.value.push(response.data)
description.value = ''
}
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="">
<input type="text" class="input" v-model="description" placeholder="Go to Mars..." />
<button type="button" name="button" @click="addItem" :disabled="!description">
<i class="bi bi-plus-lg" ></i>
</button>
</div>
<br><br><br><br>
<div class="" v-for="(item, i) in items" :key="item._id">
<p>
<span>{{ i+1 }}</span>
{{ item.description }}
</p>
</div>
</div>
</template>
<style scoped lang="scss">
@import '../public/App.scss';
</style>
Terminal Çıktısı
