Struggling to retrieve unpredictable data in a Vue.js component

Question

Struggling to retrieve unpredictable data in a Vue.js component

Help! I'm trying to randomly display one of these names in my HTML, but I can't seem to make it work:

Vue.component('modal', {
  template: '#modal-template',
 data: {
    items: [
      { name: 'Elena' },
      { name: 'Ares' }
     ]
 }, nowName : "",

 created () {
    const idx = Math.floor(Math.random() * this.items.length);
    this.nowName = this.items[idx]
  }
})

I've been struggling with my Vue code. I'm not sure if it's correct and if I can retrieve the random name using {{ nowName }}. I've tried different methods and functions in data, but nothing seems to give me a random result.

javascript vue.js data-binding

Answer 1

Answer №1

Have you considered whether the function is truly returning a random item? Keep in mind that idx will always be an integer value between 0 and this.items.length (either 0 or 1). Take for example, when running the code snippet below 10 times:

const items = [
  { name: 'You' },
  { name: 'Leonidas' }
];
new Array(10).fill(null).forEach((num) => {
  const idx = Math.floor(Math.random() * items.length);
  console.log(items[idx]);
});

nowName does not seem to be located within the data() function, which is typically where it should be. Could this be causing your issue?

Answer 2

Have you considered whether the function is truly returning a random item? Keep in mind that idx will always be an integer value between 0 and this.items.length (either 0 or 1). Take for example, when running the code snippet below 10 times:

const items = [
  { name: 'You' },
  { name: 'Leonidas' }
];
new Array(10).fill(null).forEach((num) => {
  const idx = Math.floor(Math.random() * items.length);
  console.log(items[idx]);
});

nowName does not seem to be located within the data() function, which is typically where it should be. Could this be causing your issue?

Struggling to retrieve unpredictable data in a Vue.js component

Answer №1

Similar questions

Is there a way to prevent redirection to the homepage after submitting a login form?

Leveraging viewbag information in combination with jQuery JSON techniques

Obtain details regarding a worker's collision

get an array of JSON data from a VueJS fetch or axios.get request

Strange sequence of results coming from Vue.js

The Jquery Index() method often results in a return value of -

How can I retrieve the /api/auth/me resource serverside using the NextJS AppRouter?

The slides in Swiperjs are having trouble moving smoothly

Having issues transferring the variable from JavaScript to PHP?

Switch up the Thumbnail Image based on the selected category

converting a CSV string into a JSON array using AngularJS

What is the time stamp format of 1651928421543667000?

`Moving smoothly with a slider and then reversing direction`

Best practices for referencing attributes created with the data method in a Vue component

Creating dynamic bar chart visuals using Morris.js with JSON responses

Laravel 6 does not support the mounting of Vuetable-2

Creating and fetching CSV files using PHP and AJAX

JavaScript vanilla can be difficult to grasp, especially when it comes to

Initiate Child Event within Parent Component

How to choose an option from a dropdown menu using React