Javascript Vue将变量与同级组件数据进行比较

我正在使用Vue创建一个应用程序

• 应用程序组件
  • 创建用户表单组件
  • 用户组件

我的用户组件保存用户数组，如下所示

export default {
    components: {
        User
    },
    data() {
        return {
            users: []
        }
    },
}

My users数组在users组件中保存不同的用户对象

在我的createuserform组件中，我从API获取一个id，这个id在users数组中必须是唯一的。问题是users数组位于users组件中

所以我不知道如何从我的同级组件中访问这个用户数组

---

谢谢大家!

正如有人在给你的评论中提到的那样，如果你使用像Vuex这样的东西，你的生活会轻松得多：

现在，人们经常说“这只是一个简单的应用程序，我不需要那么复杂”来避免这种情况。但在我看来，Vuex非常直截了当，而且比Redux这样的东西简单得多，如果您的体验正好是React的话。它将为您节省大量时间，并在以后编写代码

这个概念很简单；将用户存储在顶级可访问的存储中。现在，每个组件都可以到达商店，而不是试图通过事件和道具将用户传递给其他人

Vuex示例存储：

const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, credits: 1, name: "Michael", tagid: "1" },
      { id: 2, credits: 2, name: "Kate", tagid: "2" }
    ]
  },
  getters: {
    allUsers: state => {
      return state.users
    }
  }
})

从应用商店获取所有用户的组件示例：

const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, credits: 1, name: "Michael", tagid: "1" },
      { id: 2, credits: 2, name: "Kate", tagid: "2" }
    ]
  },
  getters: {
    allUsers: state => {
      return state.users
    }
  }
})

JavaScript

模板

{{{user.name}

这都是未经测试的示例代码，但希望您能看到我将如何使用它

如果您使用or，它也会非常有用，or内置了一个Vuex选项卡，允许您检查商店

---

祝你好运

您应该看看Vuex—将用户存储在Vuex状态会更容易。您可以将

users

数组放在父组件中，并将其作为道具传递下去。这样，两个组件都可以访问

用户

。或者使用Vuex3rd选项：不使用组件。

<template>
  <ul>
    <li v-for="user in allUsers" :key="user.id">{{ user.name }}</li>
  </ul>
</template>