0

代码沙盒

参考视频

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

单击“添加卡片”并单击其中一张创建的卡片后，目标是将值（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);
}

以上代码来自嵌套的 /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(payload 中的第二项) 与 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;
4

1 回答 1

0

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

两个事件：

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

或传递具有多个值的对象

  this.$emit("select", {id:this.id, randomNum:this.randomNum});
于 2020-05-14T17:47:28.303 回答