Skip to content

Latest commit

 

History

History
57 lines (46 loc) · 1.95 KB

8-renderizando-os-dados-do-componente.md

File metadata and controls

57 lines (46 loc) · 1.95 KB

Renderizando os dados do Componente

Agora que já realizamos algumas alterações nos arquivos: App.vue e TodoList.vue visando usar o v-bind para renderizar os nossos dados no Componente, vamos agora fazer algumas alterações significativas no arquivo TodoList dentro da tag: <template>.

Inclua o bloco de código, na tag <template> conforme abaixo:

arquivo: TodoList.vue

<template>
  <div>
    <p>Tarefa(s) Concluída(s):
      {{ todos.filter(todo => { return todo.concluido === true }).length }}
    </p>
    <p>Tarefa(s) Pendente(s):
      {{ todos.filter(todo => { return todo.concluido === false }).length }}
    </p>
    <div class="ui centered card" v-for="todo in todos" v-bind:key="todo.value">
      <div class="content">
        <div class="header">
          {{ todo.titulo }}
        </div>
        <div class="meta">
          {{ todo.projeto }}
        </div>
        <div class="extra content">
          <span class="right floated edit icon">
            <i class="edit icon"></i>
          </span>
        </div>
      </div>
      <div class="ui bottom attached green basic button" v-show="todo.concluido">
        Concluído
      </div>
      <div class="ui bottom attached red basic button" v-show="!todo.concluido">
        Pendente
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TodoList',
  props: ['todos'],
};

</script>

Ao executar o projeto vocês verão que a nossa aplicação está ganhando corpo. Se o seu projeto está como a imagem abaixo é porque você está indo bem! Lembrando que, caso tenha algum problema e não esteja conseguindo executar corretamente o seu projeto, não esqueça de abrir um ISSUE AQUI para que possamos te ajudar o quanto antes.

Screen-Shot-07-13-19-at-02-08-PM.png

Beleza! Vamos dar continuidade!