[Vuejs]-Vue doesn't refresh data

by

0👍

✅

For this task the best idea is to use watch, and be carefull because your num is text. Solution below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--CDN Vuejs-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Conversor</title>
    <div id="app" class="container">
        <h3>{{conversor}}</h3>
        <input type="text" class="form-group" v-model="num">
    </div>
</head>

<body>

    <script>

        const app = new Vue({
            el: '#app',

            data: {
                num: 100,
                nDecimal: ['1', '5', '10', '50', '100', '500', '1000'],
                nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M'],
                conversor: 0
            },

            watch: {
                num: function (value) {
                    if (this.nDecimal.indexOf(value) !== -1) {
                       this.conversor = this.nRomanos[this.nDecimal.indexOf(this.num)]
                    } else {
                        return 'Other'
                    }
                }
            }

        });

    </script>

</body>

</html>

Here is another solution base on computed method: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--CDN Vuejs-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Conversor</title>
    <div id="app" class="container">
        <h3>{{ conversor }}</h3>
        <input type="text" class="form-group" v-model="num">
    </div>
</head>

<body>

    <script>

        const app = new Vue({
            el: '#app',

            data: {
                num: 100,
                nDecimal: ['1', '5', '10', '50', '100', '500', '1000'],
                nRomanos: ['I', 'V', 'X', 'L', 'C', 'D', 'M']
            },

            computed: {
                conversor: function() {
                    if (this.nDecimal.indexOf(this.num) !== -1) {
                       return this.nRomanos[this.nDecimal.indexOf(this.num)]
                    } else {
                        return 'Other'
                    }
                }
            }

        });

    </script>

</body>

</html>

Leave a comment