Looping through items using v-model value in v-for

Question

Looping through items using v-model value in v-for

My website features a small form that allows users to submit new photos and view previously submitted photos. Users begin by selecting an album for the photo and then uploading it. Currently, I am encountering an issue in retrieving photos based on the selected album. Here is an example of the code:

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

In order to correctly display images within the selected album, nesting the UL inside the option is not feasible due to my page's structure. How can I pass the correct album data to iterate through the images? The data structure is organized as follows:

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

javascript vue.js vuejs2

Answer 1

Answer №1

If I had to rely on the chosen key instead of the album, here's what I would do.

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

And in your template

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

Check out an example here.

Alternatively, if you use the album as the select value, there's no need for a computed property.

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

See an example of that approach.

Answer 2

If I had to rely on the chosen key instead of the album, here's what I would do.

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

And in your template

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

Check out an example here.

Alternatively, if you use the album as the select value, there's no need for a computed property.

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

See an example of that approach.

Looping through items using v-model value in v-for

Answer №1

Similar questions

Error in Jquery click function not being triggered

Tips for incorporating several d3 elements on a single webpage

Mesh is making an excessive number of draw calls

Unable to automate the selection of a dropdown menu using Selenium WebDriver

Issue with firestore IN query when encountering NULL value

Enhance the efficiency of time tracking function

Retrieving text content from multiple classes with a single click event

One of the two identical pages is experiencing issues with the jQuery leanmodal while the other is

Implementing visibility toggles for objects in three.js using a graphical user interface

Generate a text input field within a dropdown menu

Conceal or reveal radio buttons according to information in a table

End the streaming process in React Native using React Navigation

Safari is encountering a 'Invalid Date' error in Javascript

Permission for geolocation must be granted every time when using Safari and mobile browsers

Creating HTML elements with dynamic `routerLink` attributes in Angular 2

Conceal a secret input element's value upon clicking a submit button (using PHP and jQuery)

How can I add divs to an HTML page with a Javascript animated background?

Using a global variable in Vue and noticing that it does not update computed variables?

Is there a way to display the back and forward buttons on a popup window opened through window.open or self.open in Chrome browser?

What is the best way to convert this JavaScript iteration function into jQuery?