Javascript 对数据键的值调用方法？

我一直在做一个游戏，我需要调用一个关于键'sides'值的函数，类似于'onclick=rolldiec6'。我尝试过使用mustache插值和v-binding，但除了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>

方法：

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

我试图使链接的代码最小化，但如果我能进一步链接任何内容，我很乐意。提前感谢您的帮助

您没有像这样将die.sides传递给单击处理程序：@click=rolldiedie.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>

---

所以，我的问题很简单。我做了以下更改，在对click事件做了以下更改后，它似乎按照预期工作：

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

如果有更好的方法，我很想看看。我是Vue的新手，但对Vue很感兴趣，但我绝对可以学习一些最佳实践

 <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>

---

在发布这篇文章后不久，我就意识到了我的错误，这已经够尴尬的了。出于好奇，在dice:key=die.name中使用v-for=die，索引是否比在dice:key=die.name中使用v-for=die有优势？谢谢你的帮助！当您为每个makeuse使用时，键需要是唯一的，而不是字符串，您可以将索引作为键，并将其分配到：key=index，这是非常好的标准方式！我以后一定会这样做的！再次感谢！

 <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>