javascript - 对数据键的值调用方法？

Question

我一直在开发一个游戏，我需要对键“sides”的值调用一个函数(类似于“onclick=”rollDice(6)””)。我尝试过使用 Mustache 插值和 v 绑定(bind)，但我似乎无法返回 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="roll Dice(dice.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>