Средство выбора аватара с Nuxt и Vuetify

У меня возникли некоторые проблемы с работой средства выбора аватара...

После клика выбрать аватар не заменяется и с ошибкой TypeError: невозможно прочитать свойство 'src' неопределенного в 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.info('Avatar selected')
    }
  }
}

Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
832
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в вашем методе selectAvatar, где вы пытаетесь использовать this.avatar, но он не существует. Аватар в вашем цикле for не передается вашему сценарию. Вы должны сделать так:

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

И в вашем сценарии:

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

Другие вопросы по теме