VueJS: how to access data from a v-for inside a method?

1

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

    
asked by anonymous 21.09.2017 / 03:04

1 answer

3

You need to pass the car:

<a href="#" v-on:click="verificaDetalhe(carro)">Detalhe</a>

And receive at the other end:

methods: {
  verificaDetalhe: function(carro){
    console.log(carro.detalhe);
  },
},
    
21.09.2017 / 05:49