Update UI after ajax response for iron-form in Polymer

Question

I have a problem where an ajax request is not updating the UI. I need to manually refresh the page.

Basically it's a like button. When pressed, it should increase the number of likes. The HTTP request and response are working fine. But the value {{commentaire.likes}} does not get updated immediately.

<template>
    <form is="iron-form" id="likeForm" method="post" action="/like/{{commentaire.heure}}" on-click="submitLike" on-iron-form-response="augmenterLikes">
        <paper-button raised>{{commentaire.likes}} J'aime</paper-button>        
    </form>

</template>

<script>


    Polymer({

        is: 'my-comment',
        properties: {
            commentaire : {
                type: Object,
                value: {},                  
            },
        }, 

        augmenterLikes: function(e) {
            this.commentaire.likes = e.detail.response;
        },



    });

Any help would be appreciated.

Answer 1

in order to update deep properties you must use the set method, for example in your case:

this.set('commentaire.likes', e.detail.response);

I've made an example using a random number generator in here: https://jsfiddle.net/fLbf6uag/1/