1

Tenho o seguinte código na minha 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>

            <div class="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>

Recebo a variável solicitacoes através de um 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;
        }
    },
});

Quando clico no botão "Reprovar", a função reprovar é chamada (inclusive fiz testes no Console). Porém, mesmo definindo o valor solicitacao.$$reprovado como true, nada acontece na View.

Deveria modificar a classe para box-reject assim que eu clicasse no botão, já que o valor $$reprovado foi adicionado.

Por que o valor da View não está sendo atualizado? No Angular isso funcionaria tranquilamente.

O que é necessário fazer pra funcionar a adição de um novo valor ao objecto solicitacao que está no v-for?

2
  • A chave $$reprovado existe em todos os itens que chegam do ajax?
    – bfavaretto
    Commented 25/04/2017 às 19:35
  • @bfavaretto não, ela é criada depois. Commented 25/04/2017 às 19:40

2 Respostas 2

1

No Vue, se você insere uma propriedade dinamicamente num objeto reativo, ela não será reativa:

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>Clique nos itens abaixo:</p>

<div id="app">
  <ul>
    <li v-for="item in inventory" @click="clicked(item)">
      {{ item.name }} - {{ item.test }}
    </li>
  </ul>
</div>

Para resolver, é preciso usar o 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>Clique nos itens abaixo:</p>

<div id="app">
  <ul>
    <li v-for="item in inventory" @click="clicked(item)">
      {{ item.name }} - {{ item.test }}
    </li>
  </ul>
</div>

1
0

Você precisa "atualizar" o DOM da view.

this.$forceUpdate();

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .