Question

我有Vue组件，可呈现Vuetify卡列表：

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

卡片显示从道具Vuex获得的信息，以及在餐厅物品卡片本身中定义的信息：

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

脚本为：

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

这里是关键：当我在数据中有2个对象时，第一个卡片组件可以正确呈现...而第二个卡片组件没有在脚本中定义任何方法或数据。

以下是Vue Devtools检查第一张卡片的屏幕截图的链接： https://drive.google.com/file/d/1LL4GQEj0S_CJv55KRgJPHsCmvh8X3UWP/view?usp=sharing 这是第二张卡的链接： https://drive.google.com/open?id=13MdfmUIMHCB_xy3syeKz6-Bt9R2Yy4Xe

请注意，第二个路由除路由外如何没有数据？

此外，请注意，两个组件都按预期加载了props，vuex绑定和计算的属性。在第二个上只有数据为空...

我已经为此挠了一下头。任何想法都将受到欢迎。

Answer 1

将方法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
    }
  },
  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'])
}

当用v-for作为Vuetify的卡片进行渲染时，Vue组件数据和方法会消失在一个项目上

1 个答案: