Fórum Academy - Atualizando link em component ...

Criador MarcosDisc 14/02/2022

Olá Carlos, tranquilo?

Uma dúvida. Eu tenho um componente em vue e dentro dele eu faço uso de outros dois componentes, um e um menú e outro é um componente de exibição de imagens... como eu consigo atualizar a string do src="imagem.jpg" do componente de exibição a partir de um click no componente de menú? Fiz várias pesquisas e não consegui achar nada sobre... pode me ajudar?

Att.

Marcos

6 comentários

Manager Carlos Ferreira 14/02/2022

Olá, Marcos!
Tudo bem?

Você está usando o Vue 2 ou 3?
Primeiro, você precisa fazer o bind do atributo src da imagem:
:src="image"

# vue 2
data () {
   return {
        image: 'path-image.png',
   }
}

Após isso, no menu você pode implementar o evento de click no menu
<a href="#" @click.prevent="changeImage">Menu A</a>

# vue 2
methods: {
   changeImage: {
        this.image = "outra-imagem.png"
   }
}

Criador MarcosDisc 14/02/2022

estou tentando em vue 3...

Criador MarcosDisc 14/02/2022

Olá Carlos, estudando um pouco sobre compartilhamento de dados entre componentes Vue, percebi que esse processo só é permitido entre componente pai e filho, isso procede? O motivo da minha pergunte é que os doi componentes acima são irmãos de um mesmo pai e gostaria de saber se consigo fazar a comunição entre eles sem problemas...

Uma outra dúvida:

Após isso, no menu você pode implementar o evento de click no menu
<a href="#" @click.prevent="changeImage">Menu A</a>

# vue 2
methods: {
   changeImage: {
        this.image = "outra-imagem.png"
   }
}

Eu já havia feito um código parecido, porém eu não consegui atribuir o valor e atualizar a exibição... na chamada do campo this.image ele se refere ao campo do componente de exibição importado?

Criador MarcosDisc 14/02/2022

Olá Carlos, usei o código e recomendou e exibe o senguinte erro:

error Parsing error: Unexpected keyword 'this'.

quando retiro o 'this' o código para de apresentar erro, mas não atualiza a imagem quando clico.

Criador MarcosDisc 14/02/2022

usando o link a partir do pai do exibidor de imagem e não pelo menu irmão do mesmo.

Manager Carlos Ferreira 14/02/2022

Faça esses cursos de Vue 3 aqui amigo, eles irão te ajudar muito.
https://academy.especializati.com.br/curso/vue-js-3-composicao-de-apis
https://academy.especializati.com.br/curso/vue-3-plataforma-ead

Se observar, no Vue 3 não usa mais o "this"

---
Primeiro, você precisa fazer o bind do atributo src da imagem:
:src="image"

setup () {
   const image = ref("path-image.png")

   const changeImage = () => image.value = "outra-imagem.png"

   return {
        image,
        changeImage,
   }
}

<a href="#" @click.prevent="changeImage">Menu A</a>