Как в одном теге использовать два v-for для массива в vue.js?

Рейтинг: 1Ответов: 2Опубликовано: 18.02.2023

Хочу сделать v-for для два ключа с массивом(numbers и texts) но не знаю как

<template>
    <div class="about ">
        <div class="container">
            <div class="about__wrapper">
                <div class="about__item" v-for="(number,index) in numbers" :key="index">
                    <span class="number">{{ number }}</span>
                    <p class="text">{{ text }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            numbers: ['3+', '100+', '30+'],
            texts:['лет на рынке','готовых решений','довольных клиентов']

        }
    }
}
</script>
javascript frontend vue.js
Источник: Stack Overflow на русском

Ответы

▲ 0

Сделай проще

            <div class="about__item" v-for="index in 3" :key="index">
                <span class="number">{{ numbers[index] }}</span>
                <p class="text">{{ texts[index] }}</p>
            </div>
▲ 0

Два цикла на один элемент не повешать никак. Нужно или обращаться к массивам по индексу (не очень вариант на динамических данных, пример кода в ответе @eri), или объединять массивы в массив объектов, или сразу получать массив объектов.

Как пример (если данные получаются с сервера):

new Vue({
  el: "#app",
  data() {
    return {
      numbers: ['3+', '100+', '30+'],
      texts: ['лет на рынке', 'готовых решений', 'довольных клиентов']
    }
  },
  computed: {
    unionArray() {
      return this.numbers.map((el, i) => {
        return {
          number: el,
          text: this.texts[i] || '',
        }
      });
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="about ">
    <div class="container">
      <div class="about__wrapper">
        <div class="about__item" v-for="(item,index) in unionArray" :key="index">
          <span class="number">{{ item.number }}</span>
          <p class="text">{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

Но скорее всего Вам тут проще просто задать сразу массив объектов:

new Vue({
  el: "#app",
  data() {
    return {
      data: [{
          number: '3+',
          text: 'лет на рынке',
        },
        {
          number: '100+',
          text: 'готовых решений',
        },
        {
          number: '30+',
          text: 'довольных клиентов',
        },
      ]
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="about ">
    <div class="container">
      <div class="about__wrapper">
        <div class="about__item" v-for="(item,index) in data" :key="index">
          <span class="number">{{ item.number }}</span>
          <p class="text">{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</div>