Question

我对vue.js相当新，但我似乎无法找到我正在寻找的具体答案，但我也是新的，我可能一直在寻找答案而不知道它。所以。

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

获取用户输入的参与人数
询问所有用户的姓名
使用我目前在数组中保存的名称来构建用户卡，只显示每个用户的名称。
当你的回合结束时，你会点击你的名字，下一个人卡/按钮将“加注”，然后他们点击它等。

我目前在第3部分遇到困难。我需要弄清楚如何将这个用户数组传递给我的其他组件的数据对象，这样我就可以使用vue.js循环并将卡片吐出来。

initial-start.vue - template

<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

<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

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

app-area.vue - script

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

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

1 个答案: