Подскажите, как переписать данный код на чистом JS с fetch запросами. Попытался сделать самостоятельно, мне с сервера прихордит пустой res из body, при том в network отображает поле req payload и видно значения, что я вводил в input.
Не прошу писать мне код. Просьба направить и сказать ход логики, использовать ли мне классы в написании на чистом js. Инициализировать ли форму инпута. Интересует логика!
<div id="app" v-cloak>
<v-app :dark="isDark">
<v-toolbar color="blue darken-4" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="headline">Список дел</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon @click="show = !show" v-on="on">
<v-icon v-model="isDark" @click="isDark = !isDark">{{ show ? 'check_circle' : 'check_circle_outline' }}
</v-icon>
</v-btn>
</template>
<span>{{isDark ? 'Светлая тема' : 'Темная тема'}}</span>
</v-tooltip>
</v-toolbar>
<v-container>
<v-layout row justify-center>
<v-flex xs12>
<v-card>
<v-list two-line subheader>
<v-container>
<v-subheader class="headline">
{{new Date() | date}}
</v-subheader>
<v-spacer></v-spacer>
<p class="text-xs-right"><b>{{todos.length}}</b> Задач</p>
<v-flex xs12>
<v-text-field
clearable
v-model="todoTitle"
id="newTodo"
name="newTodo"
label="Введите название задачи"
@keyup.enter="addTodo"
:dark="isDark"
>
</v-text-field>
</v-flex>
</v-container>
<v-subheader class="subheading" v-if="todos.length === 0">
У вас 0 задач, добавьте новую
</v-subheader>
<v-subheader class="subheading" v-else>
Ваши задачи
</v-subheader>
<div v-for="(todo, i) in todos" :key="i">
<v-list-tile avatar>
<v-list-tile-action>
<v-checkbox
v-if="!todo.done"
v-model="todo.done"
:dark="isDark"
></v-checkbox>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title :class="{done: todo.done}">
{{todo.title | capitalize}}
</v-list-tile-title>
<v-list-tile-sub-title>
Добавлено в: {{todo.date | date}}
</v-list-tile-sub-title>
</v-list-tile-content>
<v-btn icon ripple color="red" @click="removeTodo(todo.id)">
<v-icon class="white--text">close</v-icon>
</v-btn>
</v-list-tile>
</div>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
data() {
return {
isDark: true,
show: true,
todoTitle: '',
todos: []
}
},
methods: {
addTodo() {
const title = this.todoTitle.trim()
if (!title) {
return
}
fetch('/api/todo', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({title})
})
.then(res => res.json())
.then(({todo}) => {
console.log(todo)
this.todos.push(todo)
this.todoTitle = ''
})
.catch(e => console.log(e))
},
removeTodo(id) {
this.todos = this.todos.filter(t => t.id !== id)
}
},
filters: {
capitalize(value) {
return value.toString().charAt(0).toUpperCase() + value.slice(1)
},
date(value) {
return new Intl.DateTimeFormat('ru-RU', {
year: 'numeric',
month: 'long',
day: '2-digit'
}).format(new Date(value))
}
}
}}
