How do I update a variable in a v-for in Vue JS?

Navigation
1

I have the following code in my view: 

<div>
    <div v-for="(solicitacao, $index) in solicitacoes">

        <div class="box-image" :class="{'box-rejected' : solicitacao.$$reprovado}">

            <div class="box-image-header">
                @{{ solicitacao.usuario.nome }}
            </div>

            <div class="box-image-body">
                <img :src="solicitacao.foto_link" src="https://placehold.it/300x400"></div><divclass="box-image-footer">

                <button class='wgm-btn wgm-btn-red' type="button" v-on:click="reprovar(solicitacao, $index)">
                    Reprovar
                </button>
                <button class='wgm-btn wgm-btn-blue' type="button" v-on:click="aprovar(solicitacao)">
                    Aprovar
                </button>
            </div>

            <div class="box-image-overlay"></div>
        </div>
    </div>
</div>

I get the solicitacoes variable through an Ajax 

new Vue({
    el: '#vue-gerenciar-fotos',
    data: {
        carregando: true,
        ficha_tecnica_id: undefined,
        solicitacoes: []

    },

    mounted: function () {

        this.ficha_tecnica_id = $(this.$el).data('fichaTecnicaId');

        this.carregarSolicitacoes(1);
    },

    methods: {

        carregarSolicitacoes: function (page) {

            var that;

            that = this;

            that.carregando = true;

            $.get('/solicitacao/ajax-aguardando-aprovacao-foto/' + this.ficha_tecnica_id, {page: page}, function (response) {

                Array.prototype.push.apply(that.solicitacoes, response.solicitacoes);

                that.carregando = false;

                if (page != response.last_page) {
                    that.carregarSolicitacoes(++page);
                }
            });
        },

        reprovar: function (solicitacao, $index) {

            solicitacao.$$reprovado = true;

        },

        aprovar: function (solicitacao) {

            solicitacao.$$aprovado = true;
        }
    },
});

When I click on the "Disapprove" button, the reprovar function is called (I even did tests on the Console). However, even setting solicitacao.$$reprovado to true , nothing happens in View.

I should modify the class to box-reject as soon as I clicked the button, since the $$reprovado value was added.

Why is the View value not being updated? No Angular would work smoothly.

What do you need to do to work adding a new value to the object solicitacao that is in v-for ?

    
asked by anonymous 25.04.2017 / 18:38

2 answers

1

In Vue, if you dynamically insert a property into a reactive object, it will not be reactive

a>: 

window.onload = function() {
  var vm = new Vue({
    el: '#app',
    data: { 
      inventory: [
        // Só o 1o item tem a propriedade 'test'
        {name: 'MacBook Air', price: 1000, test: ''}, 
        {name: 'MacBook Pro', price: 1800},
        {name: 'Lenovo W530', price: 1400},
        {name: 'Acer Aspire One', price: 300}
      ]
    },

    methods: {
      clicked(item) {
        item.test = "clicked";
      },
    }
  });
};
<script src="https://unpkg.com/[email protected]"></script><p>Cliquenositensabaixo:</p><divid="app">
  <ul>
    <li v-for="item in inventory" @click="clicked(item)">
      {{ item.name }} - {{ item.test }}
    </li>
  </ul>
</div>

To resolve, you must use Vue.set : 

window.onload = function() {
  var vm = new Vue({
    el: '#app',
    data: { 
      inventory: [
        // Só o 1o item tem a propriedade 'test'
        {name: 'MacBook Air', price: 1000, test: ''}, 
        {name: 'MacBook Pro', price: 1800},
        {name: 'Lenovo W530', price: 1400},
        {name: 'Acer Aspire One', price: 300}
      ]
    },

    methods: {
      clicked(item) {
        this.$set(item, 'test', 'clicked');
      },
    }
  });
};
<script src="https://unpkg.com/[email protected]"></script><p>Cliquenositensabaixo:</p><divid="app">
  <ul>
    <li v-for="item in inventory" @click="clicked(item)">
      {{ item.name }} - {{ item.test }}
    </li>
  </ul>
</div>
    
25.04.2017 / 22:05
0

You need to "update" the DOM of the view.

this. $ forceUpdate ();

    
25.04.2017 / 19:30
Adjust only one component Write Hmtl Table data in the Bank | Laravel 5.1