Вызовите метод для значения ключа данных?

Question

Я работал над игрой, и мне нужно вызвать функцию для значения ключа 'сторон' (аналогично 'onclick = "rollDice (6)"').Я пытался использовать усовую интерполяцию, а также v-привязку, но я не могу вернуть ничего, кроме NaN или undefined.

Соответствующая разметка:

   <v-list>
    <v-list-tile v-for="die in dice" :key="die.name">
      <v-list-tile-avatar>
        <v-avatar size="32px" tile @click="rollDice()" >
          <img :src="die.img">
        </v-avatar>
      </v-list-tile-avatar>
      <v-list-tile-title>{{ die.name }}</v-list-tile-title>
    </v-list-tile>
  </v-list>

Из данных:

dice: [
    { img: require("../assets/d4.svg"), name: "d4", sides: 4 },
    { img: require("../assets/d6.svg"), name: "d6", sides: 6  },
    { img: require("../assets/d8.svg"), name: "d8", sides: 8 },
  ]

Из методов:

  rollDice: function(sides){
  var rollResult = Math.ceil(Math.random() * sides)
  console.log(rollResult)
}

Я пытался сохранить минимальный связанный код, но если я смогу связать что-нибудь еще, я был бы рад.Заранее благодарю за помощь!

Answer 1

Вы не передаете die.sides в обработчик кликов следующим образом: @click="rollDice(die.sides)".

Полный код будет:

<v-list>
  <v-list-tile v-for="die in dice" :key="die.name">
    <v-list-tile-avatar>
      <v-avatar size="32px" tile @click="rollDice(die.sides)" >
        <img :src="die.img">
      </v-avatar>
    </v-list-tile-avatar>
    <v-list-tile-title>{{ die.name }}</v-list-tile-title>
  </v-list-tile>
</v-list>

Answer 2

 <v-list>
<v-list-tile v-for="(die, index) in dice" :key="die.name">
  <v-list-tile-avatar>
    <v-avatar size="32px" tile @click="rollDice(die.sides)" >
      <img :src="die.img">
    </v-avatar>
  </v-list-tile-avatar>
  <v-list-tile-title>{{ die.name }}</v-list-tile-title>
</v-list-tile>

Answer 3

Итак, моя проблема была простой. Я внес следующее изменение, и оно, похоже, работает должным образом после внесения следующих изменений в событие click:

<v-avatar size="32px" tile @click="rollDice(die.sides)">

Если есть лучший способ сделать это, мне было бы интересно посмотреть. Я новичок в Vue, но у меня есть шанс, но я определенно смогу выучить некоторые лучшие практики!