Как заставить смениться аватар после загрузки нового без reload'а страницы?

Question

[Cathari]

Есть профиль user'a, в котором реализована возможность загрузки аватара.
Также в навигации есть иконка (уменьшенная версия того самого аватара). Не знаю как сделать так, чтобы эта иконка обновлялась сразу после загрузки нового аватара в профиле пользователя.


Вот таким способом он меняется только после перезагрузки =((

вот так отдаю пропс

<Avatar v-bind:avatar ="'{{ Auth::user()->avatar }}'"></Avatar>

а вот что в компоненте

<template>
    <div class="flex align-content-center" style="padding: 0.4rem">
        <img :src="avatar" style="width:32px; height:32px; border-radius:50%;" alt="avatar">
    </div>
</template>

<script>
    export default {

        props: [
            'avatar'
        ],
    }
</script>

Answer 1

[Антон Антон]

Один из способов - подцепить какой-нибудь event bus, после завершения ajax запроса посылать в него событие об этом, ловить его в компоненте с миниатюрой и вызывать перезагрузку изображения (можно добавить к src что-нибудь типа ?randomsring)

Comments

[Cathari]

мм немного не понял о чем вы. Создать ивент который будет вызываться после ajax запроса?что за event bus...)

[Антон Антон]

Cathari, https://webformyself.com/event-bus-dlya-obmena-svo...

Answer 2

[VegasChickiChicki]

Auth::user()->avatar - не понимаю что это? Это laravel? Если да - то зачем вы передаете в динмаический параметр серверный код?

У вас этот параметр должен храниться в stor'e или в data поле. После выполнения запроса на сервер просто изменяете это поле и все, все должно работать.

P.S. О каких event bus'ах или ивентах идет речь, если данные stor'а или data объекта и так реактивны? У автора проблема в том, что он эти данные передает как серверную переменную, насколько я понял.

Comments

[Alex Wells]

Это не SPA)

[Cathari]

это Laravel;
это не SPA;
этим Auth::user()->avatar я пепредаю в пропс путь картинки

[VegasChickiChicki]

Cathari, Если вы хотите, что бы это было динамическим свойством, тогда передавать нужны не просто в пропсы, а класть в отдельную переменную и потом уже передавать в пропсы. После ответа сервер(выполнения какого либо метода на смену фото) - менять данные в переменной.

[Cathari]

VegasChickiChicki, не пойму что имеется ввиду.

у меня в мейн шаблоне есть компонент

<Avatar v-bind:avatar ="'{{ Auth::user()->avatar }}'"></Avatar>

а также есть отдельный шаблон страницы профиля, в котором компонент профиля, где применяется метод на смену аватара. Поэтому в какой переменной данные связать, чтобы она взаимодействовала с другим компонентом...не пойму.

[VegasChickiChicki]

Cathari, Попробую объяснить. Скажу сразу - я не знаю как работает laravel, по этому на 50% это просто догадка. Суть в том, что такая конструкция Auth::user()->avatar - выполняется 1 раз при загрузке страницы, так как его выполняет сервер и отдает на фронт, дальше, это просто статика и ни как вы ее не оживите, ибо сервер шаблон сгненерировал - выдал, спит.
Что бы это стало динамическими данными, и обновлялось на фронте, нужно сделать это по другому.
Покажу пример с использованием библиотеки axios.

<Avatar v-bind:avatar ="UserAvatar " />

data: () => {
   return {
         UserAvatar: false,
      }
   },
async mounted() {
   axios.$post('get-user-photo.php').then(response => {
     this.UserAvatar = response.data;
   });
},
methods: {
   UploadPhoto(){
    axios.post('upload-user-photo.php', {
      UserPhoto: 'user-photo'
    }).then(response => {
      this.UserAvatar = response.data;
    });
  }
}

[VegasChickiChicki]

Cathari, Соответственно, на сервере должны быть методы, которые отдадут вам фото по запросу и после загрузки фото вернут вам url на него.