在 VueJS 中的 v-for 循环中，在数据属性上输出数学函数结果的正确方法是什么？

Question

作为游戏的一部分，我一直在 Vue 中开发骰子滚筒。我使用 v-for 遍历骰子的类型以创建一组按钮和一个将显示结果的附属 div。问题是即使我的控制台日志是正确的，我似乎也无法让我的 rollResult 更新应该插入的位置。我只包含必要的代码来拯救你的眼睛。如果我还能提供，请告诉我。提前致谢！

HTML:

<v-list-tile v-for="die in dice" :key="die.name">
...
 <template v-slot:activator="{ on }">
      <v-btn class="primary" @click="rollDice(die.sides)">Roll</v-btn> 
          <div>{{rollResult}}</div>
</template>
...
</v-list-tile>

数据：

      rollResult: 0,
      dice: [
        { sides: 4 },
        { sides: 6 },
        { sides: 8 },
        { sides: 10 },
        { sides: 12 },
        { sides: 20 }
      ],

函数：

    rollDice: function(n) {
     let rollResult = Math.ceil(Math.random() * n);
        console.log(rollResult);
    }

Answer 1

您正在创建一个局部变量，而不是改变状态（data）。使用：

rollDice: function(n) {
    this.rollResult = Math.ceil(Math.random() * n);
    console.log(this.rollResult);
}

演示：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    rollResult: 0,
    dice: [
      { sides: 4 },
      { sides: 6 },
      { sides: 8 },
      { sides: 10 },
      { sides: 12 },
      { sides: 20 }
    ],
  },
  methods: {
    rollDice: function(n) {
        this.rollResult = Math.ceil(Math.random() * n);
        console.log(this.rollResult);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="die in dice" :key="die.name">
    <button class="primary" @click="rollDice(die.sides)">Roll {{ die.sides }}</button>
    <div>{{rollResult}}</div>
  </div>
</div>

如果您需要单独的结果，请将 rollResult 转换为数组（或对象）并注意一些注意事项（例如使用 Vue.set()）：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    rollResult: [0, 0, 0, 0, 0, 0],
    dice: [
      { sides: 4 },
      { sides: 6 },
      { sides: 8 },
      { sides: 10 },
      { sides: 12 },
      { sides: 20 }
    ],
  },
  methods: {
    rollDice: function(n, index) {
        Vue.set(this.rollResult, index, Math.ceil(Math.random() * n));
        console.log(this.rollResult);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(die, index) in dice" :key="die.name">
    <button class="primary" @click="rollDice(die.sides, index)">Roll {{ die.sides }}</button>
    <div>{{rollResult[index]}}</div>
  </div>
</div>

在 VueJS 中的 v-for 循环中，在数据属性上输出数学函数结果的正确方法是什么？

What is the proper way to output the result of a math function on a data property within a v-for loop in VueJS?

javascript

interpolation

vue.js

v-for

在 VueJS 中的 v-for 循环中，在数据 属性 上输出数学函数结果的正确方法是什么？

What is the proper way to output the result of a math function on a data property within a v-for loop in VueJS?

javascript

interpolation

vue.js

v-for

在 VueJS 中的 v-for 循环中，在数据属性上输出数学函数结果的正确方法是什么？