Не отображается контент на странице

Question

Помогите решить вопрос.

Начал изучать node js. В учебном материале используется Vue. Когда запускаю браузер - то получаю пустую страницу. В консоле есть ошибки, но так как я новичок то не могу понять как решить проблему Подскажите что надо сделать чтобы страница отобразилась. Вот учебный код:

 <!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <style>
    .done {
      text-decoration: line-through;
    }
    [v-cloak] {
      display: none;
    }
  </style>
  <title>Задачи</title>
</head>
<body>
<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"
                      @change="completeTodo(todo.id)"
                      :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.createdAt | date(true)}} 
                      (измененено {{todo.updatedAt | date(true)}})
                    </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>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      isDark: true,
      show: true,
      todoTitle: '',
      todos: []
    }
  },
  created() {
    fetch('/api/todo', {
      method: 'get'
    })
      .then(res => res.json())
      .then(todos => {
        this.todos = todos
      })
      .catch(e => console.log(e))
  },
  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}) => {
          this.todos.push(todo)
          this.todoTitle = ''
        })
        .catch(e => console.log(e))
    },
    removeTodo(id) {
      fetch('/api/todo/' + id, {
        method: 'delete'
      })
        .then(() => {
          this.todos = this.todos.filter(t => t.id !== id)
        })
        .catch(e => console.log(e)) 
    },
    completeTodo(id) {
      fetch('/api/todo/' + id, {
        method: 'put',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({done: true})
      })
        .then(res => res.json())
        .then(({todo}) => {
          const idx = this.todos.findIndex(t => t.id === todo.id)
          this.todos[idx].updatedAt = todo.updatedAt
        })
        .catch(e => console.log(e))
    }
  },
  filters: {
    capitalize(value) {
      return value.toString().charAt(0).toUpperCase() + value.slice(1)
    },
    date(value, withTime) {
      const options = {
        year: 'numeric',
        month: 'long',
        day: '2-digit'
      }

      if (withTime) {
        options.hour = '2-digit'
        options.minute = '2-digit'
        options.second = '2-digit'
      }
      return new Intl.DateTimeFormat('ru-RU', options).format(new Date(value))
    }
  }
})
</script>
</body>
</html>

БЛОГ НА HUSL

Не отображается контент на странице

Ответы (0 шт):