v-for基于v-model值的项目

Question

我有一个小表单，用户可以在其中提交新照片并查看以前在表单下提交的照片。 在表单的开头，用户选择照片进入的相册然后上传。 我遇到的问题是如何根据他们选择的相册来获取照片。 样品：

<select v-model="newPhoto.album">
  <option value="">Select Album</option>
  <option v-for="album in albums" :value="album['.key']">{{album.name}}</option>
</select>

<ul>
  <li v-for="img in album">{{img.name}}</li>
</ul>

我知道如果UL嵌套在选项中但由于我的页面结构不是一个选项，这将有效。 如何传递正确的专辑以重复播放专辑中的图像？ 数据结构如下：

-Album Firebase ID
  images
    -Photo Firebase ID
      src:
      name:

Answer 1

如果我使用所选的键而不是专辑，我可能会这样做。

computed:{
  selectedAlbum(){
    return this.albums.find(a => a['.key'] === this.newPhoto.album)
  }
}

并在您的模板中

<ul v-if="newPhoto.album">
  <li v-for="img in selectedAlbum.imgs">{{img.name}}</li>
</ul>

这是一个例子 。

如果您将相册用作选择的值，则可能会出现这种情况。 不需要计算。

<select v-model="newPhoto.album">
  <option value="">Select Album</option>
  <option v-for="album in albums" :value="album">{{album.name}}</option>
</select>

<ul>
  <li v-for="img in newPhoto.album.imgs">{{img.name}}</li>
</ul>

一个例子 。