[Vuejs]-Vue components data and methods disappear on one item when rendered with v-for as Vuetify's cards

0👍

I got it to work after I moved the method getPhotoUrl method to a computed property:

computed: {
  comment() {
    // Grab the content of the comment that the current user wrote for the current restaurant
    if (isEmpty(this.card.comments)) {
      return { content: 'You have no opinions of this place so far' }
    } else {
      const userComment = find(this.card.comments, o => o.uid === this.currentUser)
      return userComment
    }
  },
  photoUrl() {
    const cardsDefault = find(this.card.photos, o => o.default)

    if (isEmpty(cardsDefault)) {
      return 'https://via.placeholder.com/500x200.png?text=No+pics+here+...yet!'
    } else {
      return cardsDefault.url
    }
  },
  ...mapGetters(['currentUser'])
}

Leave a comment