Question

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

因此，假设我从api返回了5个带有特定键名的卧室图像数组：

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

我想循环每个数组中的每个图像，而且还要循环整个事情，所以我在模板中只有一个“ bedroom-wrap”元素可以循环打印。

类似的东西，尽管这种语法不起作用。

<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

最简单的方法是将图像放在单独的对象中

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

如果将数组包装为和一个对象，则可以根据需要进行工作。

at Company.Redacted.Application.Readers.ProjectReader.GetSuggestedServerLocation(Guid projectId) 
in C:\repos\redacted\redacted\redacted\redacted\Company.Redacted\Application\Readers\ProjectReader.cs:line 669

JavaScript：

<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>

您的代码的有效示例是here

VueJS-带索引创建的对象键名称的v-for循环

2 个答案: