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

这是一个 example .

如果您使用专辑作为您选择的值，它可能看起来像这样。无需计算。

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

安example