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

Posted 2023-02-23

【中文标题】将用户输入传递给 vue.js 中的另一个组件

【英文标题】：passing user input to another component in vue.js

【发布时间】：2018-02-06 02:28:31

【问题描述】：

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

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

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

我目前很难处理第三部分。我需要弄清楚如何将这个用户数组传递给我其他组件的数据对象，以便我可以使用 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>

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

【问题讨论】：

vuejs.org/v2/guide/components.html#Passing-Data-with-Props

【参考方案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>

【讨论】：

谢谢，这似乎对我有用。我现在收到一些其他警告，关于组件列表应该有明确的键。它并没有阻止应用程序完全运行，但它还没有按照我想要的方式运行（发出的值而不是错误的实例）：使用 v- 呈现的组件列表for 应该有明确的键。

你可以这样设置密钥：<userCards v-for="user in users" v-bind:user="user" v-bind:key="user.id">

我在这里仍然遇到问题，您的所有代码和逻辑似乎都是正确的，但应用程序仍然没有做任何事情。我似乎无法确定该方法是否将数据发送出组件，因为它看起来不像。我什至不能在同一个组件中调用用户的值。我已经制作了一个单独的按钮，它只是假设提醒用户但它没有 - 试图在控制台中手动提醒它它说用户未定义。我将我的整个应用程序项目放在 github 上的一个 repo 中，这样你就可以看到整个事情 github.com/Yintii/trackerapp

我看到的第一个问题是您访问数据时出错了。你有data.users = users。尝试像this.users = users 一样访问它。在您的 check 函数中进行相同的更改。