[Vuejs]-How can I map array in vue.js

by

0👍

✅

This looks like a good use case for arrays and loops.

  1. Instead of an object, put your sample text into an array, and iterate that with a for-loop.

  2. Update scrambleText() call to pass the array index instead of the object key previously used for your object:

const texts = reactive([ // 1️⃣
  'インバウント',
  'BtoB',
  'セールス',
  'OODA',
  '指標',
  //...
])

onMounted(() => {
  for (let i = 0; i < texts.length; i++) { // 1️⃣
    anime({
      duration: 1000,
      easing: 'linear',
      loop: true,
      update: scrambleText(texts[i], i), // 2️⃣
    })
  }
})
  1. In your template, use a v-for to iterate the texts array:
<ul>
  <li v-for="text in texts">{{ text }}</li>
</ul>

demo

0👍

You can put all your texts in an array and iterate over it like so:

<ul>
   <li v-for="text in texts" :key="text">{{ text }}</li>
</ul>

Key given with the condition that all of your texts are unique.

And follow up with changing the functions in the onMounted to do something like:

texts.forEach((text, index) => {
      anime({
        targets: ".main",
        duration: 1000,
        easing: "linear",
        loop: true,
        update: scrambleText(text, index),
      });
    });

Leave a comment