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
?
$$reprovado
existe em todos os itens que chegam do ajax?