Где можно прописать функцию

Question

<template>
  <div id="app">
    <AppHeader />
    <div class="search-panel d-flex">
      <SearchPanel/>
      <ItemStatusFilter/>
    </div>
    <TodoList v-bind:todos="todos"
              v-on:toggleActive="toggleActive"
              v-on:deleteTodo="deleteTodo"
    />
    <ItemAddForm/>

  </div>
</template>

<script>
  import AppHeader from './components/AppHeader/AppHeader'
  import SearchPanel from "./components/SearchPanel/SearchPanel"
  import ItemStatusFilter from "./components/ItemStatusFilter/ItemStatusFilter";
  import TodoList from "./components/TodoList/TodoList";
  import ItemAddForm from "./components/ItemAddForm/ItemAddForm";

  export default {
    name: 'App',
    data() {
      return {
        todos: [
          {id: 1, title: 'Купить хлеб', active: true},
          {id: 2, title: 'Купить масло', active: false},
          {id: 3, title: 'Купить колбасу', active: true}
        ]
      }
    },
    methods: {
      toggleActive(id) {
        const newTodos = this.todos.map(t => {
          if(t.id === id) {
            t.active = !t.active
            return t
          }
          return t
        })
        this.todos = newTodos

      },
      deleteTodo(id) {
        const newTodos = this.todos.filter(t => t.id !== id)
        this.todos = newTodos
      }
    },
    components: {
      AppHeader,
      SearchPanel,
      ItemStatusFilter,
      TodoList,
      ItemAddForm
    }
  }
</script>

<style>
  #app {
    margin: 2rem auto 0 auto;
    max-width: 550px;
  }
</style>

Нужно в компонент перекинуть пропсы длину todos и число активных задач. Вопрос где я должен написать функцию для того чтобы по считать длину todos и активных задач??

Answer 1

Очевидно в computed

<template>
  ...
  <div>Всего: {todosLength}</div>
  <div>Активных: {activeTodosCount}</div>
  ...
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      todos: [
        {id: 1, title: 'Купить хлеб', active: true},
        {id: 2, title: 'Купить масло', active: false},
        {id: 3, title: 'Купить колбасу', active: true}
      ]
    }
  },
  computed: {
    todosLength() {
      return this.todos.length;
    },
    activeTodosCount() {
      return this.todos.filter(t => t.active).reduce(count => count + 1, 0);
    }
  },
  methods: {
    ...
  },
  ...
}
</script>

БЛОГ НА HUSL

Где можно прописать функцию

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