在另一个组件Vue.js中循环组件

Question

这里的问题是如何让我的task.vue文件循环到我的tasklist.vue文件中，因为我知道我愿意传递一个json文件，所以我可以得到所有要执行的任务的列表。

Task.vue

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

<script>
export default {
  name: "task",
  data() {
    return {
      id: 1,
      name: "Test",
      date: new Date(),
      time: "9:30 ",
      description: "whatever"
    };
  }
};
</script>

所以这个task.vue应该是一个我可以在tasklist.vue中使用的容器。

tasklist.vue

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

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

export default {
  name: "tasklist",
  data() {
    return {
      tasks: []
    };
  },
  components: {
    Task
  }
};
</script>

Answer 1

• 如果任务组件正在重新启动，则应在表格标记内插入标记。
• 使用道具将数据从任务列表 - 组件
传递到任务组件
• 当 tasklist-component 正在创建时，您可以通过json从Ajax加载任务。
• 您可以找到代码的完整工作示例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>

Answer 2

您需要使用Properties将任务从任务列表传递到任务。代码未经测试。

任务

<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>

任务列表

<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>