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

Question

I have Vue component that renders a list of Vuetify cards:

  <restaurant-item 
    v-for="card in userRestaurantCards" 
    :key="card['.key']" 
    :card="card"
  >
  </restaurant-item>

The card displays info obtained from props, Vuex, as well as info defined in the restaurant-item card itself:

  <v-card>
    <v-img
      class="white--text"
      height="200px"
      :src="photo"
    >
      <v-container fill-height fluid class="card-edit">
        <v-layout fill-height>
          <v-flex xs12 align-end flexbox>
            <v-menu bottom right>
              <v-btn slot="activator" dark icon>
                <v-icon>more_vert</v-icon>
              </v-btn>

              <v-list>        
                <edit-restaurant-dialog :card="card" :previousComment="comment"></edit-restaurant-dialog>

                <v-list-tile >
                  <v-list-tile-title>Delete</v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-menu>
          </v-flex>
        </v-layout>
      </v-container>
    </v-img>

    <v-card-title>
      <div>
        <span class="grey--text">Friends rating: {{ card.rating }}</span><br>
        <h3>{{ card.name }}</h3><br>
        <span>{{ card.location }}</span>
      </div>
    </v-card-title>

    <v-card-actions>
      <v-btn flat color="purple">Comments</v-btn>
      <v-spacer></v-spacer>
      <v-btn icon @click="show = !show">
        <v-icon>{{ show ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
      </v-btn>
    </v-card-actions>

    <v-slide-y-transition>
      <v-card-text v-show="show">
        <div> {{ comment.content }} </div>
      </v-card-text>
    </v-slide-y-transition>

  </v-card>

The script is:

  import { find, isEmpty } from 'lodash-es'
  import { mapGetters } from 'vuex'
  import EditRestaurantDialog from '@/components/dashboard/EditRestaurantDialog'

  export default {
    name: 'restaurant-item',
    components: {
      EditRestaurantDialog
    },
    props: {
      card: Object
    },
    data() {
      return {
        show: false,
        name: this.card.name,
        location: this.card.location,
        rating: this.card.rating,
        link: this.card.link,
        photo: this.getPhotoUrl()
      }
    },
    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
        }
      },
      ...mapGetters(['currentUser'])
    },
    methods: {
      getPhotoUrl() {
        const cardsDefault = find(this.card.photos, o => o.default).url

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

Here is the kicker: when I have 2 objects in the data, the first card component renders correctly... while the second doesn't have any of the methods or data defined right there in the script.

Here's a link to a screenshot of the Vue Devtools inspecting the first card: https://drive.google.com/file/d/1LL4GQEj0S_CJv55KRgJPHsCmvh8X3UWP/view?usp=sharing Here's a link of the second card: https://drive.google.com/open?id=13MdfmUIMHCB_xy3syeKz6-Bt9R2Yy4Xe

Notice how the second one has no Data except for the route?

Also, note that both components loaded props, vuex bindings and computed properties just as expected. Only the Data is empty on the second one...

I've been scratching my head for a while over this. Any ideas would be more than welcome.

userRestaurantCards is a simple array with 2 objects. Here's a screenshot of it in Vue Devtools: drive.google.com/open?id=1MECipFYPxp9uqULS3qBi5s50Feumkxv3 @wwerner — Cesar Martinez Dominguez

Cesar Martinez Dominguez Cesar Martinez Dominguez · Accepted Answer · 2018-12-02T16:17:10

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'])
}

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

1 Answers