I have the following problem, I need to manipulate some variables that are in my data , through a click, that is inside a (v-for) list . But I can only create the condition directly inside the click, I can not make the comparisons through a method.
Here's an example:
js
var app = new Vue({
el: '#app',
data: {
exemplo1: false,
exemplo2: false,
carros: [
{
"tipo": "Passeio",
"cor": "Azul",
"detalhe": "Sim"
},
{
"tipo": "4x4",
"cor": "Preto",
"detalhe": "Não"
}
]
},
methods: {
verificaDetalhe: function(){
console.log(this.carros.detalhe);
},
},
})
html
<div id="app">
<div v-for="carro in carros">
<h1>Tipo: {{carro.tipo}}</h1>
<h2>Cor: {{carro.cor}}</h2>
<a href="#" v-on:click="verificaDetalhe()">Detalhe</a>
<a href="#" v-on:click="if(carro.detalhe == 'Sim'){ exemplo1 = true}">Detalhe2</a>
</div>
<div v-if="exemplo1">Exemplo1</div>
<div v-if="exemplo2">Exemplo2</div>
</div>
By clicking on the a "Detail2" of the first car in the list, the condition is satisfied, but since I have several rules, I wanted to use a method for this.
How can I do this check the list through a method? I tried to use a forEach but without success.
Follow a codepen link to help me see what I'm trying to do: link