Computed v-for Vuejs

Question

I have a v-for

<div  v-for="(m, ind) in arrayMeses" :key="ind" v-if="m" class="mes">
    <table border="1" width="100%">
        <tbody> 
            <tr class="mes_title">
                <td colspan="7" class="mes_title font-14"> 
                    {{ m }} - {{ testeComputed(ind) }}
                </td>
            </tr>
        </tboddy>
    </table>

I want to run a method on each interaction When the data is changed run as well

I tried to

 computed: {
     testeComputed: function(ind) {
         console.log('m',ind)
         return 'teste' + ind
     },
 },

You are returning an object with all page elements I would like to receive the index or month name

Answer 1

You are using computed properties wrong. Think about computed as a read-only property.

See the example below:

<div id="exemplo">
  Mensagem ao contrário: {{ mensagem.split('').reverse().join('') }}
</div>

To remove "raw" logic from the template, a computed Property is used.

Expressions within templates are very convenient, but are intended for simple operations. Putting a lot of logic into them can make them swollen and their maintenance more complicated. ("Computed and Observer Data", from documentation)

The result:

<div id="exemplo">
  <p>Mensagem ao contrário: {{ mensagemAoContrario }}</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Olá Vue'
  },
  computed: {
    mensagemAoContrario: function () {
      return mensagem.split('').reverse().join('');
    }
  }
})

If you really want to parameterize this, you can use a field in data or even a method, in methods.