Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

function

Bom dia, fiz um card que toda vez que eu coloco uma foto na array ele cria outro card com novos textos e botoes, só que eu quero que quando eu clico no botão do card ele exiba um alert diferente em cada card. É possível fazer uma function para cada botão?

 template: `
    <div>


           <div class="row">

                    <div v-for="img in fotos">
                    <article class="col-md-3 p-3">
                    <div class="card" style="width: 18rem;">
                    <img :src="img.url" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{ img.titulo }}</h5>
                        <a href="#" class="btn btn-primary" @click="botao">{{ mais }}</a>
                    </div>
                    </div>
                    </article>
                    </div>
                    </div>


  </div>

    `

ARRAY

fotos: [
                { url: foto', titulo: 'teste' },

                { url: foto, titulo: 'teste' },
]

METHODS

methods: {
        botao: function () {
           alert('olá1')
        },

        botao2: function(){
            alert('Olá2')
        }
    }
4 respostas

Fala ai Leveditor, tudo bem? Vamos lá:

É possível fazer uma function para cada botão?

Sim, isso é possível, porém a maneira que você está fazendo tem que ser diferente.

O ideal nesse caso é você ter apenas uma função no seu methods e essa função receber algum parâmetro de cada card, algo assim:

methods: {
    algumaFuncao(cardId) {
        console.log(cardId)
    }
]

Dessa maneira, no template você passa um identificador para cada card:

<button class="btn btn-primary" @click="algumaFuncao(mais)">{{ mais }}</a>

A ideia é mais ou menos essa.

Espero ter ajudado.

mas meu card ta sendo criado toda vez que eu coloco um img na array e eu só tenho acesso á um botão

eu quero criar um botão para cada card igual eu faço com a img e depois criar uma função para cada botão.

{ url: foto', titulo: 'teste', botao: <a>teste</a> }

eu quero fazer isso mais ou menos

solução!

Na verdade o botão vai ser criado um para cada card, isso porque você adicionou ele dentro do loop (v-for).

Onde ele vai percorrer a lista de card's e criar determinado template HTML para cada um deles.

Porém, a função que você irá chamar em cada click dos N botões será a mesma, sendo assim, para diferenciar qual botão está chamando a função, você pode passar um parâmetro para sua função:

<div v-for="img in fotos">
    <article class="col-md-3 p-3">
        <div class="card" style="width: 18rem;">
            <img :src="img.url" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{ img.titulo }}</h5>
                <a href="#" class="btn btn-primary" @click="botao(img)">{{ mais }}</a>
            </div>
        </div>
    </article>
</div>

Repare que no @click do a onde ele chama a função botao eu estou passando o item à ser iterado pelo v-for. Sendo assim, podemos receber esse parâmetro na função botao:

methods: {
    botao(img) {
        console.log(img)
    }
]

A cada click ele vai logar uma imagem diferente.

A ideia é mais ou menos essa.

Espero ter ajudado.