[Vuejs]-Looping a component in another component Vue.js

by

1👍

✅

You need to use Properties to pass your task from your task list to your task. Code is untested.

#Task

<template>
    <table :id="task.id" class="task_box">
        <tr>
            <td class="task_user">{{task.name}}</td>
            <td class="task_date">{{task.date}}</td>
            <td class="task_time">{{task.time}}</td>
        </tr>
        <tr>
            <td colspan="3" class="task_description">
                <div class="toto">{{description}}</div>
            </td>
        </tr>
    </table>
</template>

<script>
export default {
  name: "task",
  props: ["task"],
};
</script>

#TaskList

<template>
    <div>
        <task v-for="task in tasks" :task="task" :key="task.id"></task>
    </div>
</template>

<script>
import Task from "./Task.vue";

export default {
  name: "tasklist",
  data() {
    return {
      tasks: [{
                 id: 1,
                 name: "Test",
                 date: new Date(),
                 time: "9:30 ",
                 description: "whatever"
      }]
    };
  },
  components: {
    Task
  }
};
</script>
👤Tim Hutchison

1👍

  • If task-component is reapeating, you should insert it’s tag inside table tag.
  • Use props to pass data to task-component from tasklist-component
  • When tasklist-component is creating, you can load tasks via Ajax from json.
  • Full working example of code you can find here

TaskList.vue

<script>
  import Task from "./Task.vue";

  export default {
    components: { Task },
    data() {
      return {
        tasks: [],
        isLoading: false,
        doShowNewTaskAddingDialog: false,
      };
    },
    created(){
//      this.isLoading = true;

//      $.ajax({
//        url: '/some/tasks/url',
//        method: 'GET',
//        dataType: 'json',
//        success: (tasks) => {
//          this.isLoading = false;
//          this.tasks = tasks;
//        }
//      });

       this.tasks = [
         {id: 1, name: "task 1", date: new Date(), time: "9:31", description: "descr 1" },
         {id: 1, name: "task 2", date: new Date(), time: "9:32", description: "descr 2" },
         {id: 1, name: "task 3", date: new Date(), time: "9:33", description: "descr 3" },
         {id: 1, name: "task 4", date: new Date(), time: "9:34", description: "descr 4" },
       ]
    },
    methods:{
      addButtonHandler(){
        this.doShowNewTaskAddingDialog = true;
      }
    }
  };
</script>

<template>
  <div>
    <div v-if="isLoading">Please wait, loading tasks...</div>
    <table v-if="!isLoading">
      <task
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        :isNew="false"
      />

      <task
        v-if="doShowNewTaskAddingDialog"
        :isNew="true"
      />
    </table>
    <a href="javascript:" @click="addButtonHandler">Add new?</a>
  </div>
</template>

<style>
  table, td{
    border-collapse: collapse;
    border: 1px solid black;
  }
</style>

Task.vue

<template>
  <!--
    I'd prefer use bootstrap row and col- divs here instead
    of table and tbody-hack. See discussion here: https://github.com/vuejs/Discussion/issues/295
  -->
  <tbody>
    <!-- display only -->
    <tr v-if="!isNew">
      <td class="task_user">{{name}}</td>
      <td class="task_date">{{date}}</td>
      <td class="task_time">{{time}}</td>
    </tr>
    <tr v-if="!isNew">
      <td colspan="3" class="task_description">
        <div class="toto">{{description}}</div>
      </td>
    </tr>

    <!-- edit -->
    <tr v-if="isNew">
      <td class="task_user"><input type="text" v-model="name"></td>
      <td class="task_date"><input type="text" v-model="date"></td>
      <td class="task_time"><input type="text" v-model="time"></td>
    </tr>
    <tr v-if="isNew">
      <td colspan="3" class="task_description">
        <div class="toto"><input type="text" v-model="description"></div>
      </td>
    </tr>
  </tbody>
</template>

<script>
  export default {
    props:{
      task: { type: Object, required: false },
      isNew: { type: Boolean, required: true },
    },

    created(){
      if(!this.isNew){
        this.id = this.task.id;
        this.name = this.task.name;
        this.date = this.task.date;
        this.time = this.task.time;
        this.description = this.task.description;
      }
    },

    data() {
      return {
        id: 1,
        name: "",
        date: new Date(),
        time: "0:00 ",
        description: ""
      };
    }
  };
</script>

Screenshot of code above

👤hedin

Leave a comment