在数据键的值上调用方法？

Question

我一直在开发一款游戏，我需要根据键 'sides' 的值调用一个函数（类似于 'onclick="rollDice(6)"'）。我试过使用小胡子插值和 v 绑定，但我似乎无法 return 除了 NaN 或未定义之外的任何东西。

相关标记：

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

我试图使 linked 代码保持最少，但如果我能 link 更进一步，我会很高兴。预先感谢您的协助！

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

在数据键的值上调用方法？

Call a method on the value of a data key?

javascript

key-value

vue.js

vuejs2

vuetify.js