为了账号安全,请及时绑定邮箱和手机立即绑定

无法将数组从存储模块通过父元素发送到子元素

无法将数组从存储模块通过父元素发送到子元素

慕妹3242003 2022-09-23 21:34:26

我有一个商店模块:


const state = {

    todoList: [

        {

            id: 1,

            title: "Todo One"

        },

        {

            id: 2,

            title: "Todo Two"

        }

    ]

};


const getters = {

    getTodoList: (state) => state.todoList

};


const actions = {


};

const mutations = {


};


export default {

    state,

    getters,

    actions,

    mutations

};

我有一个父元素:


<template>

  <section>

    <h2>Todo List</h2>

    <Todo />

    <div>

      <input

        type="text"

        name="enterTodo"

        placeholder="What are you up today ?"


      />

      <button type="submit"

        @click="addTask"

      ><i class="fas fa-plus"></i></button>

    </div>

  </section>

</template>


<script>

import Todo from "./Todo.vue";

import { mapGetters } from "vuex";


export default {

  name: "TodoContainer",

  components: {

    Todo,

  },

  props: [],

  methods: {

    addTask: () => {


    }

  },  

  computed: mapGetters(["getTodoList"]),

};

</script>

我有子元素:


<template>

  <div>

    <div class="todo" v-for="todo in getTodoList" :key="todo.id">

      {{ todo.title }}

    </div>

  </div>

</template>


<script>

export default {

  name: "Todo",

  props: ["getTodoList"],

};

</script>


<style scoped></style>


问题在于在子元素中。

如何通过父元素将 todoList 从存储模块发送到子元素?

没有真正的教程,缺乏指南,我没有找到任何与我的特定情况相似的东西。getTodoListundefined


查看完整描述

1 回答

?
BIG阳

TA贡献1524条经验 获得超6个赞

您需要像这样传递给您的子组件:getTodoList

<Todo :getTodoList="getTodoList" />

但是,如果您具有Vuex getter,则最好直接在子组件中调用它,就像您具有父组件一样。如果它未在父级中使用,则无需在那里调用它,然后将其作为道具传递。getTodoList


查看完整回答
反对 回复 5天前
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信