如何从数组 VueJS/NuxtJs 中检索传递给 prop 的值

Question

我正在尝试检索动态创建并传递给道具的值。

点击"add card"并点击其中一张创建的卡片后，目标是将值(prop: randomNum)传递给变量(num1)。

在 Sandbox 中，我能够获取同样动态创建的 Id 的值。

methods: {
//"emits" or Allows value of the id prop in Array to be reached from parent?
select() {
  this.$emit("select", this.id);
}

上面嵌套的代码/component/card.vue

 <card
    v-for="cards in cardArray"
    :key="cards.id"
    :id="cards.id"
    :randomNum="cards.randomNum"
    @select="selectCard"
    :selectedCard="selectedCard"
    :playable="cards.playable"
    :visable="cards.visable"
  ></card>
  <h1>{{num1}}</h1>
  <h1> {{ selectedCard }} </h1>
 ----------
data() {
return {
  cardArray: [],
  selectedCard: null,
  num1: null,
----------
methods: {
    selectCard(cards) {
      this.selectedCard = cards;
    }

以上代码来自/component/hand.vue

据我了解，在这种情况下，卡片的计算结果为 this.id？

如何设置 num1 等于 cards.randomNum（有效负载中的第二项） 与 selectedCard 评估为 cards(cards.id)

的方式相同

我尝试了 "item.Array" 的变体，并在 this.randomNum 上使用 $emit ，就像在 $emit this.Id 上使用的一样，但不起作用，我该如何正确这样做？

 //in card hand componenet
select() {
  this.$emit("select", this.id);
this.$emit("select", this.randomNum);

} 
//in card hand componenet
selectNum(cards.randomNum) {
  this.num1 = randomNum;

Answer 1

您可以使用两个单独的事件，也可以只传递一个具有多个值的对象。

两个事件：

select() {
  this.$emit("selectId", this.id);
  this.$emit("selectNum", this.randomNum);
}

或传递具有多个值的对象

  this.$emit("select", {id:this.id, randomNum:this.randomNum});

如何从数组 VueJS/NuxtJs 中检索传递给 prop 的值

How to retrieve value passed to a prop from an array VueJS/NuxtJs

javascript

arrays

vue.js

nuxt.js

codesandbox

您可以使用两个单独的事件，也可以只传递一个具有多个值的对象。