如何从数组中检索传递给道具的值 VueJSNuxtJs

Question

CodeSandbox

参考视频

我试图检索一个动态创建并传递给一个道具的值。

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

在沙盒中，我能够得到Id的值，这也是动态创建的。

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

以上代码来自嵌套的组件卡.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;
    }

以上代码来自于主组件and.vue。

根据我的理解，在这种情况下，卡的值为this.id？

我如何设置num1等于card.randomNum(payload中的第二个项目)与selectedCard评估为cards(cards.id)的方式相同。

我尝试过 "itemit.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});