Question 54158 in Javascript Question posted in
A very good W3school tutorial can be found here.

Vue.js changed data is not showing on screen – Javascript

<template>
    <div class="parent">
        <div class="container">
            <h1 class="start" @click="start_timer">
                {{ timerText }}
            </h1>
        </div>
    </div>
</template>

<script>
    import Timer from 'easytimer.js';
    export default {
        name: 'GameStart',
        components: {

        },

        data() {
            return {
                timerText: "Start"
            }
        },

        methods: {
            start_timer() {

                var timer = new Timer();
                timer.start({countdown: true, startValues: {seconds: 4}});

                timer.addEventListener('secondsUpdated', function () {
                    this.timerText = timer.getTimeValues()['seconds'].toString();
                    console.log(this.timerText);

                })

                timer.addEventListener('targetAchieved', function () {
                    console.log('complete');
                    this.timerText = "COMPLETE!!";

                });

            }
        },

        mounted() {
            // var timer = new Timer();
            // timer.start();

            // timer.addEventListener('secondsUpdated', function () {
            //     console.log(timer.getTimeValues().toString());
            // });


        }
    }
</script>

<style>


    .parent {
        position: absolute;
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;


    }

    .start {
        color: crimson;
        font-size: 50px;

    }

</style>

This is one of my component of my vue.js project.
I am trying to make mobile game with vue.js.
When user click the ‘start’ h1 tag, it run start_timer function.

I changed the variable timerText in the function start_timer, but the changed value (3, 2, 1) is not showing on the window.

What can I do for make three seconds counter in result?

Tags:

2

Answers


  1. 0

    A common error with this

    In Vue, we rely on this being a keyword that shares properties everywhere in the instance. Where it breaks down, however, is when we create a function with the keyword function.

    Inside that function, the word this now refers to that function, not to the overall Vue component’s this.

    To avoid that problem, don’t create the function with the function keyword: just use the fat-arrow notation, which does not create a new local this.

    Fix

    Change

    timer.addEventListener('secondsUpdated', function () {
                    this.timerText = timer.getTimeValues()['seconds'].toString();
                    console.log(this.timerText);

                })

    to

    timer.addEventListener('secondsUpdated',  ()=> {
                    this.timerText = timer.getTimeValues()['seconds'].toString();
                    console.log(this.timerText);

                })
    Login or Signup to reply.
  2. 0

    Your problem statement is all about how to access the this inside a callback function.

    As we are trying to access the component data objects. We should use arrow function as that don’t provide their own this binding (it retains this value of the enclosing lexical context).

    Hence, your callback functions should be change from a normal functions to an arrow functions.

    timer.addEventListener('secondsUpdated', () => {
  // You can access your data objects/properties here using `this` keyword.
})

timer.addEventListener('targetAchieved', () => {
  // You can access your data objects/properties here using `this` keyword.
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search