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。

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

1 个答案: