将用户输入传递给 vue.js 中的另一个组件

Question

我对 vue.js 还很陌生，但我似乎无法为我正在寻找的东西找到具体的答案，但我也足够新，我可能一直在寻找答案但不知道它.所以。

我要做的是创建一个基本上跟踪转弯的单页应用程序。 它将：

1. 接受用户参与的用户数量
2. 询问所有用户的姓名
3. 使用我目前保存在数组中的名称来构建用户卡，只显示每个用户的名称。
4. 当轮到你时，你会点击你的名字，下一个人的卡片/按钮会“加注”，然后他们会点击它，等等。

我目前很难处理第三部分。我需要弄清楚如何将这个用户数组传递给我其他组件的数据对象，以便我可以使用 vue.js 循环并吐出卡片。

initial-start.vue - 模板

<template lang="html">
 <div>
  <div>
   <h1>How many users?</h1>
   <input type="number" id="myNumber" value="0">
   <button v-on:click="getUsers">Submit</button>
   <app-area v-if="users > 0 && users < 5"></app-area>
  </div>
</div>
</template>

initial-start.vue - 脚本

<script>
export default {
methods:{
getUsers(){
  var counter = 0;
  var users = [];
  var x = document.getElementById("myNumber").value;
  if (x <= 0){
    alert('Please choose a number greater than 0.');
  }else if(x > 4){
    alert('Maximum 4 users!');
  }else{
    alert('thank you for that.')
  }
    while(counter < x){
      name = prompt('Please enter your names.');
      users.push(name);
      counter++;
    }
    return users;
  }
}
}
</script>  

app-area.vue - 模板

<template lang="html">
 <div>
  <h1>Turn: {{ turn }}</h1>
  <userCards></userCards>
 </div>
</template>

app-area.vue - 脚本

<script>
 export default {
  data() {
   return{
    turn: 0,
    users: []
   }
  },
props: ['users']
}
</script>

问题是，“我如何从 getUsers() 函数中获取数组，进入我可以像这样循环的应用程序区域

<userCards v-for="user in users"></userCards>

每个输入的人都有一个卡片/按钮？”

Answer 1

您应该将getUser 的值保存在您的数据中，然后您可以将其传递给您的app-area 组件。

data: {
  users: 0
}
methods:{
getUsers(){
  @users = 2;
}

然后在你的 html 中：

<app-area v-if="users > 0 && users < 5" v-bind:users="users"></app-area>

现在您的app-area 模板可以访问users。所以你可以将每个用户传递给userCard组件

<userCards v-for="user in users" v-bind:user="user"></userCards>