javascript - 如何在@click 上更新模板

Question

代码

我有以下代码。我想用随机选择更新 results-box。我将如何在 @click 事件上更新模板。

<template>
  <div class="container">
    <button @click="getDecision()" class="ui primary button">Discover</button>
    <p id="results-box"></p>
  </div>
</template>

<script>
  export default {
    name: "SlapButton",
    data() {
      return {

      }
    },
    methods: {
      getDecision: function () {
        var decisions = [
          "choice 1",
          "choice 2",
          "choice 3",
          "choice 4",
          "choice 5",
          "choice 6"
        ]
        var randNum = Math.floor((Math.random() * decisions.length) + 0);
        var randChoice = decisions[randNum];
      }
    }
  }

</script>

问题

当用户点击按钮时，调用 getDecision() 并从 decisions 数组中随机选择一个选项。如何在 p 标记 #results-box 中显示此随机选择 randChoice。

Answer 1

尝试下面的代码，如果这不起作用请详细说明:

<template>
  <div class="container">
    <button @click="getDecision" class="ui primary button">Discover</button>
    <p id="results-box">
      {{choice}}
    </p>
  </div>
</template>


<script>
  export default {
    name: "SlapButton",
    data() {
      return {
        choice: '',
        decisions = [
                  "choice 1",
                  "choice 2",
                  "choice 3",
                  "choice 4",
                  "choice 5",
                  "choice 6"
                ]
      }
    },
    methods: {
      getDecision() {
        var randNum = Math.floor((Math.random() * this.decisions.length) + 0);
        this.choice = this.decisions[randNum];
      }
    }
  }

</script>