Tips for refreshing a template with a click event

Question

Tips for refreshing a template with a click event

Problem Statement

I currently have a piece of code that involves updating the results-box with a randomly chosen selection. I need to know how to modify the template when a @click event occurs.

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

Question

Following a click event on the button, getDecision() function is activated, and a random choice is selected from the decisions array. How do I present this random choice randChoice within the p tag #results-box.

javascript vue.js vue-component

Answer 1

Answer №1

Here is a code snippet to help you generate random choices when a button is clicked:

<template>
  <div class="container">
    <button @click="pickRandomChoice" class="ui primary button">Choose</button>
    <p id="results-box">
      {{selectedChoice}}
    </p>
  </div>
</template>

<script>
export default {
  name: "RandomChoiceGenerator",
  data() {
    return {
      selectedChoice: '',
      choices: [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5",
        "Option 6"
      ]
    }
  },
  methods: {
    pickRandomChoice() {
      var randomIndex = Math.floor(Math.random() * this.choices.length);
      this.selectedChoice = this.choices[randomIndex];
    }
  }
}
</script>

Answer 2

Here is a code snippet to help you generate random choices when a button is clicked:

<template>
  <div class="container">
    <button @click="pickRandomChoice" class="ui primary button">Choose</button>
    <p id="results-box">
      {{selectedChoice}}
    </p>
  </div>
</template>

<script>
export default {
  name: "RandomChoiceGenerator",
  data() {
    return {
      selectedChoice: '',
      choices: [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5",
        "Option 6"
      ]
    }
  },
  methods: {
    pickRandomChoice() {
      var randomIndex = Math.floor(Math.random() * this.choices.length);
      this.selectedChoice = this.choices[randomIndex];
    }
  }
}
</script>

Answer 3

Answer №2

To demonstrate how this works, check out this example ^{and take a look at another mini demonstration}

In essence, all you need is a variable to store the randChoice. Once you define this variable within the data (){} object, set its value within your method like so:

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];
    }
  }
}

Then, display this data in your element like this:

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

Answer 4

To demonstrate how this works, check out this example ^{and take a look at another mini demonstration}

In essence, all you need is a variable to store the randChoice. Once you define this variable within the data (){} object, set its value within your method like so:

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];
    }
  }
}

Then, display this data in your element like this:

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

Tips for refreshing a template with a click event

Problem Statement

Question

Answer №1

Answer №2

Similar questions

Combining multiple arrays in Node.js to create a single JSON file

What triggers the invocation of the onerror handler in XMLHttpRequest?

The webpage is not displaying any results despite using .innerHTML with Ajax

Why does Vue only change a specific array element without updating the DOM?

Build an upvote feature using PHP and WordPress that allows users to vote without causing a page reload

Implementing dynamic title insertion into a popover element using jQuery

Having trouble getting req.files to work in a Node.js Express application?

Steps for retrieving a Unicode string from PHP using AJAX

Tips for transforming this jquery script into "vanilla" javascript

Switch on and off the active class in child components using VueJS

Refreshing a single HTML element in ASP.NET MVC - the simple way!

Dealing with an empty req.body in an Express.js POST request

Developing a Chessboard Using JavaScript

Is it Possible to Achieve Callbacks From AJAX to PHP Despite the Inability to Serialize Closures?

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

Is webpack necessary for segregating dependencies during installation?

Creating pages or tabs within a table using HTML5 and Angular is a simple and effective way to organize

The matter concerning the intricacies of Rails, JQuery, Prototype, and RJS

Client.on facing issue with receiving data upon initial connection

Within Blade, Laravel and Vue components are able to communicate by sharing data from one component to another