VueJS - 使用索引创建的 object 键名的 v-for 循环

Question

如何在 Vue 中创建一个 v-for 循环，并将图像数组名称创建为字符串模板？

因此，假设我有 5 个 arrays 卧室图像从 api 返回，具有特定的键名：

data() { 
  return {
    Bedrooms: 5,
    // values set in created(){}
    Bedroom1Images: [], 
    Bedroom2Images: [],
    Bedroom3Images: [],
    Bedroom4Images: [],
    Bedroom5Images: [],
  }
}

而且我想循环每个数组中的每个图像，而且循环整个事情，所以我在模板中只有一个“卧室包装”元素，可以循环打印。

像这样的东西，虽然这种语法不起作用。

<div v-for="(n, index) in Bedrooms" :key="index"> // master outside loop
  <div class="bedroom-wrap">
    <label>Bedroom {{ n }}:</label>
    <ul class="photos">
      <li v-for="(item, index) in `Bedroom${n}Images`" :key="index">  // name array using `n` from outside loop?
        <a data-fancybox="bedrooms" :href="item.thumbnails.full.url">
          <img :src="item.thumbnails.large.url" alt="Bedroom Image" />
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 1

最简单的方法是将图像放在单独的 object 中：

data() { 
  return {
    Bedrooms: 5,
    // values set in created(){}
    BedroomImages: {
      1: [],
      2: [],
      3: [],
      4: [],
      5: [],
    }
  }
}

然后在你的模板中你可以做BedroomImages[n] ：

<div v-for="(n, index) in Bedrooms" :key="index"> // master outside loop
  <div class="bedroom-wrap">
    <label>Bedroom {{ n }}:</label>
    <ul class="photos">
      <li v-for="(item, index) in BedroomImages[n]" :key="index">  // name array using `n` from outside loop?
        <a data-fancybox="bedrooms" :href="item.thumbnails.full.url">
          <img :src="item.thumbnails.large.url" alt="Bedroom Image" />
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 2

如果您将 arrays 包装到 object 中，那么您可以按照我们的意愿工作。

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

<div id='app'>
  <div v-for="(n, index) in Bedrooms" :key="index"> // master outside loop
    <div class="bedroom-wrap">
      <label>Bedroom {{ n }}:</label>
      <ul class="photos">
        <li v-for="(item, index) in Images[`Bedroom${n}Images`]" :key="index"> {{item}}
        </li>
      </ul>
    </div>
  </div>
</div>

JavaScript：

new Vue({
  el: '#app',

  data() {
    return {
      Bedrooms: 5,
      // values set in created(){}
      Images: {
        Bedroom1Images: [1, 2],
        Bedroom2Images: [1, 2],
        Bedroom3Images: [],
        Bedroom4Images: [1, 2],
        Bedroom5Images: [],
      }
    }
  }
})

你的代码的一个工作示例是here