Как получить значение, переданное опоре, из массива VueJS / NuxtJs

CodeSandbox

Справочное видео

Я пытаюсь получить значение, которое было динамически создано и передано в опору.

После нажатия кнопки «добавить карту» и нажатия на одну из созданных карт цель состоит в том, чтобы передать значение (prop: randomNum) в переменную (num1).

В песочнице я могу получить значение идентификатора, который также был создан динамически.

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 равным card.randomNum (второй элемент в полезной нагрузке) Таким же образом, как selectedCard оценивает карты (cards.id)

Я пробовал варианты "item.Array" и использовал $ emit для this.randomNum так же, как он использовался для $ 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;

javascript arrays vue.js nuxt.js codesandbox
person vaspam    schedule 14.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать два отдельных события или просто передать объект с несколькими значениями.

два события:

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

или передать объект с несколькими значениями

  this.$emit("select", {id:this.id, randomNum:this.randomNum});
person Daniel    schedule 14.05.2020