Как через vue по нажатию на кнопку, записать в data атрибут src картинки?

Question

[Макс Жуков]

Как через vue по нажатию на кнопку, записать в data атрибут src картинки?

Answer 1

[Nikita Velko]

Попробуйте так:

<img src='someUrl' ref="picture">
<button type="button" @click="getImageSrc()">Get source</button>

...
methods: {
  getImageSrc() {
    this.yourVariable = this.$refs.picture.getAttribute('src');
  },
},

Comments

[Макс Жуков]

Спасибо, но мне говорили что лучше избегать ref) Может еще как-нибудь можно?

[Nikita Velko]

Макс Жуков, ну подобную задачу только через ref и решать. Тем более в такой простой задаче вас ref точно никак не подведет, поверьте.

[Александр Гонтарев]

или так как написал nikichv, или url уже известен, т.к. шаблон же генерится во вью и src же откуда-то подставляете

Answer 2

[0xD34F]

Можно доставать src через ref.

UPD. Но вообще, это ерунда какая-то, совсем не vue way, src изначально должен присутствовать в data и оттуда подставляться в элемент img. Тогда не придётся никуда за ним лезть при нажатии на кнопку.

Например, через кнопку переключаем значение свойства, которое указывает, нужен ли src, а тот src, который вы хотели получать, оформляем как вычисляемое свойство.

Или, пусть есть несколько картинок и по клику на соответствующие им кнопки выбираем src.

Comments

[Nikita Velko]

Зачем писать ответ с точно таким же решением, которое было опубликовано раньше? :)

[0xD34F]

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

[Nikita Velko]

0xD34F, можете оставить, проблем никаких с этим нет. Просто была интересна мотивация публикации одинакового ответа. Теперь все стало понятно.