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

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>

Answer

You are not returning Names in your data object.

Try this

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

Advertisement

Answer