时间戳

首页 > 解决方案 > 如何为动态组件传递道具/对象的所有值

javascript - 如何为动态组件传递道具/对象的所有值

问题描述

我有一个 v-for 循环，它遍历一个获取的待办事项列表的对象。循环对象被传递给一个子组件，该组件包含一个单独的 todo。问题是，当使用 vue devtools 进行检查时，只能访问单个 Todo 的一个值 - todo。最初一个 todo 应该有 3 个值：id、completion 和 todo，但是当它向下传递时，只访问 todo 值。有什么建议吗？

主要组件，其中包含 v-for 循环

<template>
  <div>
    <CreateTodo />
    <hr />

    <div class="TodoContainer">
      <div v-for="todo in todos" v-bind:key="todo.id" class="TodoComponent">
        <SingleTodo v-bind="todo" />
      </div>
    </div>

    <hr />
  </div>
</template>

<script>
import CreateTodo from "./CreateTodo";
import SingleTodo from "./SingleTodo";
import { ref, onMounted } from "vue";

//
export default {
  components: {
    CreateTodo,
    SingleTodo,
  },

  setup() {
    const API_URL = "http://127.0.0.1:8000/api/todo-list/";
    const todos = ref([]);

    async function getTodos() {
      const response = await fetch(API_URL);
      const json = await response.json();
      todos.value = json;
    }

    onMounted(() => {
      getTodos();
    });

    return {
      todos,
      getTodos,
    };
  },
};
</script>

单组分

<template>
  <div class="TodoComponent">
    <router-link :to="`/rest-todo/${todo.id}`" class="TodoValue">
      id: {{ todo.id }}
    </router-link>
    <div
      class="TodoValue"
      :class="{
        completeTrue: todo.completion == true,
        completeFalse: todo.completion == false,
      }"
    >
      {{ todo }}{{ completion  }}
    </div>
  </div>
  <div>

  </div>
</template>

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

标签： javascriptvue.jsvue-component

解决方案

想通了，有点。当你在 v-for 循环中绑定一个 todo 时，你必须在子组件 props 中定义每个向下传递的值才能访问它。下面回答

单组分

<script>
export default {
  props: ["todo", 'completion', 'id'],
};
</script>

推荐阅读