method in Vue.js cannot alter data value

Question

I'm using Vue.js 2 and i'm trying to make a component that does a simple discount calculation after user input.

The object i'm using as starting data is an object made like this: it is composed of several building and each of them can have several rooms inside. I have an object (i write it as an array, but it's an object) who has

buildings[<building_id>][<room_id]={room_id: <room_id>,
                                    building_id: <building_id>
                                    name: <name>,
                                    price: <regular_price>
                                    discounted_price: <discounted_price>
                                    discount: discount}

Here is the full code of the component

<template>
    <div>
        {{ buildings }}
        <li v-for="(building, k) in buildings" :key="k">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr><th>Room</th><th>Standard price</th><th>Discounted price</th><th>Discount</th></tr>
                </thead>
                <tbody>
                    <tr v-for="(room, s) in building" :key="s">
                        <td>{{room.name}}</td>
                        <td>{{room.price}} €</td>
                        <td><input type="text" class="form-control" v-model="room.discounted_price" 
                            @input="calcDiscount(room)"></td>
                        <td><input type="text" class="form-control" v-model="room.discount" disabled></td>
                    </tr>
                </tbody>
            </table>
        </li>
    </div>
</template>
<script>
export default {
    data: function() {
        return {
            buildings: {},
        }
    },
    mounted() {
        this.getBuildings();
    },
    methods: {
        getBuildings: function(callback) {
            httpRequest(api_url + "get/buildings").then(onResult => {
                this.buildings = onResult.data.buildings;
            });
        },
        calcDiscount(evt) {
            room.discount = Math.round(
               100 - (100 * room.discounted_price) / room.price
            );
        }
    }
}
</script>

I have two problems with this code. First, the v-bind on the input element does not work. As you can see i've printed the buildings object on top and i don't see the values of discounted_price change on the user input.

But apart this, despite the log display the right values, nor the value of discount nor of discounted_price are changed in the object. But the values are taken correctly because they're printed right just one line before. What i'm doing wrong? Thanks

EDITED after tao comments

FURTHER UPDATE: Since the code tao made here in the playground works, the problem should be something in my environment. Apparently the function calcDiscount works well since if i print the value inside that function it's printed correctly. But somehow the changes disappear when function exists. Could be that the event take place like in a different space?

Answer 1

You need to change @input by v-on:keyup . input binding just change the value inside but it doesn't make web app recognize that it need to re-render.