Question

我一直在开发游戏，我需要在键“ sides”的值上调用一个函数（类似于“ 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

所以，我的问题很简单。我进行了以下更改，并且对click事件进行了以下更改后，它似乎可以按预期工作：

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

如果有更好的方法可以完成，我很想看看。我是Vue的新手，但是对此很满意，但是我绝对可以学习一些最佳实践！

Answer 3

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

调用数据键值的方法吗？

3 个答案: