时间戳

首页 > 解决方案 > 使用 Nuxt 和 Vuetify 的头像选择器

javascript - 使用 Nuxt 和 Vuetify 的头像选择器

问题描述

我在制作头像选择器时遇到了一些问题......

单击以选择未替换的头像并出现错误TypeError: Cannot read property 'src' of undefined at VueComponent.selectAvatar

我目前正在使用 Vuetify 和v-avatar带有 v-for 的组件来加载所有图像。

知道如何使它工作吗？

HTML

<v-flex xs12 pt-0 pb-0>
  <h1 class="title mb-4">User Details</h1>
  <v-avatar
    size="100px"
  >
    <img
      :src="this.selectedAvatar"
      alt="Avatar"
    >
  </v-avatar>
</v-flex>
<v-flex x12>
  <v-btn
    color="primary"
    flat="flat"
    small
    @click="selectAvatarDialog = true"
    class="avatar-btn"
  >
    Update avatar
  </v-btn>
</v-flex>

<v-dialog
  v-model="selectAvatarDialog"
  max-width="80%"
>
  <v-card>
    <v-container fluid pa-2>
        <v-layout row wrap align-center justify-center fill-height>
          <v-flex xs6 sm4 md3 lg2 my-2 class="text-xs-center"
          v-for="(avatar,i) in avatars"
          :key="i">
            <v-img
              :src="avatar.src"
              aspect-ratio="1"
              width="100px"
              max-width="100px"
              min-width="100px"
              class="dialog-avatar-img"
              @click="selectAvatar()"
            ></v-img>
          </v-flex>
        </v-layout>
      <v-card-actions class="mt-2">
        <v-spacer></v-spacer>

        <v-btn
          color="primary"
          flat="flat"
          @click="selectAvatarDialog = false"
        >
          Cancel
        </v-btn>
      </v-card-actions>
    </v-container>
  </v-card>
</v-dialog>

JS

export default {
  layout: 'default',

  data() {
    return {
      selectAvatarDialog: false,
      avatars: [
        {src: require('@/assets/images/avatar-01.png') },
        { src: require('@/assets/images/avatar-02.png') },
        { src: require('@/assets/images/avatar-03.png') },
        { src: require('@/assets/images/avatar-04.png') },
        { src: require('@/assets/images/avatar-05.png') }
      ],
      selectedAvatar: require('@/assets/images/avatar-01.png'),
    }
  },
  methods: {
    selectAvatar(){
      this.selectedAvatar = this.avatar.src
      console.log('Avatar selected')
    }
  }
}

谢谢

标签： javascriptvue.jsvuetify.jsnuxt.js

解决方案

问题出在您尝试使用“this.avatar”但它不存在的 selectAvatar 方法中。您的 for 循环中的头像不会传递给您的脚本。你应该这样做：

<v-img
  ...
  @click="selectAvatar(i)"
></v-img>

在你的脚本中：

methods: {
    selectAvatar(i){
      this.selectedAvatar = this.avatars[i].src
      console.log('Avatar selected')
    }
  }

推荐阅读