Как обновить шаблон на @click

Question

Как обновить шаблон на @click

1

Код

У меня есть следующий код. Я хочу обновить 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. Как отобразить этот случайный выбор randChoice в поле результатов p tag #results-box.

Jonathan Portorreal 05 дек. 2017, в 17:36

Источник

0

не могли бы вы уточнить?
Daksh Miglani 05 дек. 2017, в 15:49

Теги:

javascript

vue.js

vue-component

2 ответа

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>

Daksh Miglani 05 дек. 2017, в 13:42

0

Это не сработало, но я получил это сообщение об ошибке в консоли. Property or method "choice" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Jonathan Portorreal 05 дек. 2017, в 15:54
0

попробуйте сейчас, я обновил событие
Daksh Miglani 05 дек. 2017, в 15:55

Ещё вопросы

Это не сработало, но я получил это сообщение об ошибке в консоли. Property or method "choice" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
попробуйте сейчас, я обновил событие

samayo · Accepted Answer · 2017-12-05T13-40-00.000Z

Вот демонстрационный пример ^{и еще один микропривод}

В принципе. Вам понадобится переменная, которая будет удерживать randChoice только вы определяете эту переменную внутри объекта data(){}, просто дайте ей значение внутри вашего метода следующим образом:

export default {
  name: "SlapButton",
  data() {
    return {
      randomChoice: false
    }
  },
  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);
      this.randomChoice = decisions[randNum];
    }
  }
}

Теперь просто покажите эти данные в своем элементе следующим образом:

<p id="results-box"> {{randomChoice}} </p>