How in Vue choose random name from from an array of names?

Question

In "data" There is an array of Names: ['Bogdan', 'Ruslan' ...]. How to make a random name get selected from the Names array and inserted into the <p> Names </ p> tag?

I tried to do it like this -- <p>{{Names[Math.floor(Math.random() * Names.length)]}}</p> but for some reason it does not work

<f7-list
  media-list
  virtual-list
  :virtual-list-params="{ items, renderExternal, height: $theme.ios ? 63 : ($theme.md ? 73 : 46)}"
>
  <ul>
    <f7-list-item
      v-for="(item, index) in vlData.items"
      :key="index"
      media-item
      link="#"
      :title="item.title"
      :subtitle="item.subtitle"
      :style="`top: ${vlData.topPosition}px`"
    >
    <f7-block strong>
      <p>Name:{{Names[Math.floor(Math.random() * Names.length)]}}</p>
    </f7-block>
    <f7-block>
      <p>Surname:</p>
    </f7-block>
    </f7-list-item>
  </ul>
</f7-list>

<script>
export default {
    data() {
 Names: [ "Bogdan", "Vladimir", "Nikolay", "Stepan", "Sergey", "Igor", "Vladislav", "Miroslav", "Nikita", "Alexander", "Ivan", "Ruslan", "Maria", "Victoria", "Angella", "Zhanna", "Irina", "Marina", "Yulya", "Olya", "Dasha", "Natasha", "Masha"]
  const items = []
  for (let i = 1; i <= 10; i += 1) {
    items.push({
      title: `UserID ${i}`,
      // subtitle: `SurName ${i}`,
    });
  }
  return {
    items,
    vlData: {
      items: [],
    },
  };
},
methods: {
  renderExternal(vl, vlData) {
    this.vlData = vlData;
  },
  randomName(){

  },
  loadMore(event, done) {
      window.location.reload();
  }
},
}
</script>

Lawrence Cherone · Accepted Answer · 2019-03-21 11:41:02Z

2

You're doing to much in the data section, instead use a function or a computed value to get your random name.

For example,

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

<div id="app">
  <p>Name:{{ randomNameFunc() }}</p>
  <p>Name:{{ randomNameProp }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        Names: ["Bogdan", "Vladimir", "Nikolay", "Stepan", "Sergey", "Igor", "Vladislav", "Miroslav", "Nikita", "Alexander", "Ivan", "Ruslan", "Maria", "Victoria", "Angella", "Zhanna", "Irina", "Marina", "Yulya", "Olya", "Dasha", "Natasha", "Masha"]
      }
    },
    computed: {
      randomNameProp: function (){
        return this.Names[Math.floor(Math.random() * this.Names.length)]
      }
    },
    methods: {
      randomNameFunc() {
        return this.Names[Math.floor(Math.random() * this.Names.length)]
      }
    }
  });
</script>

answered Mar 21, 2019 at 11:41

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radu Diță Over a year ago

I think that the computed property will return one value per component as Math.random is not reactive.

Radu Diță · Accepted Answer · 2019-03-21 11:41:11Z

0

You are not returning Names in your data object.

Try this

return {
  Names,
  items,
  vlData: {
    items: [],
   },
 };

answered Mar 21, 2019 at 11:41

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 05:27:12Z

0

Use a computed property. For example:

  data() { 
    return {
      names: ['John', 'Carlos', 'Matt'] 
    }
  },
  computed: {
    randomName() {
      let n = this.names.length
      let randomNumber = Math.floor(Math.random() * n)
      return this.names[randomNumber]
    }
  }

You then can use

<p>{{ randomName }}</p>

edited Jul 16, 2022 at 5:27

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 21, 2019 at 11:54

natemate90

116 bronze badges

3 Comments

Radu Diță Over a year ago

The computed method will generate the same value on a single component. There is no reactive property in it so vue will cache the result. Each component will get a random value, but inside a single component, you'll get the same value no matter how many times you call the computed method. jsfiddle.net/yhs5aunx

natemate90 Over a year ago

A computed property is reactive to data changes, for example if you do mounted() { setTimeout(() => { this.names.push("Phil") }, 5000) } the randomName prop is evaluated again.

Radu Diță Over a year ago

A computed property is reactive to data change, but Math.random and Math.floor are not data changes. The only case when the computed property in your example will change is if names.lenth changes. There is no other property inside it that will trigger a computation. Try the jsfiddle and see that you'll always get the same 3 names.

Collectives™ on Stack Overflow

How in Vue choose random name from from an array of names?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related