Under specific circumstances, it is not possible to reset a property in vue.js

In Vue.js, I have developed a 'mini-game' that allows players to 'fight'. After someone 'dies', the game declares the winner and prompts if you want to play again. However, I am facing an issue where resetting the health of both the player and the monster back to 100 after choosing to play again doesn't work as expected. Despite having tried various solutions, including console logs for debugging, the issue persists.

checkWinner: function() {
    if(this.mHp <= 0) {
        if (confirm('You won! Play again?')) {
            this.startGame();
        } else {
            this.gameIsActive = false;
        }
        return true;
    } else if (this.pHp <= 0) {
        if (confirm('You lost! Play again?')) {
            this.startGame();
        } else {
            this.gameIsActive = false;
        }
        return true;
    }
    return false;
}

If anyone could provide some insights on why this reset functionality is not working, I would greatly appreciate it. Thank you in advance!

Link to Full Code

javascriptvue.jsvuejs2

Answer №1

The error lies within your startGame() method, where the variables pHp and mHp are not properly initialized using this.

Instead of:

pHp = 100;
mHp = 100;

You should use:

this.pHp = 100;
this.mHp = 100;

I identified this issue by utilizing console.log() to track the function execution, which eventually led me to realize that the data was not being updated correctly.

Answer №2

When you call the startGame function, make sure to remember to use this. when setting the lifespan values (pHp, mHp) to a new value.

Answer №3

In my opinion, you can make it functional by including 'this' before your hp parameters.

    startGame: function() {
        this.gameIsActive = true;
        this.pHp = 100;
        this.mHp = 100;
    },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best techniques for streamlining nested objects with Zod.js?

As a newcomer to zod.js, I have found that the DataSchema function is extremely helpful in verifying API data types and simplifying the API response easily. However, I'm curious if there is a way to streamline the data transformation process for myEx ...

javascripttypescriptzod

The methods $.get() and $.ajax() in jQuery are failing to retrieve data from PHP

I've been trying to use a script to display a message from a PHP file after a click event, but I've run into issues with both jQuery $.get() and $.ajax(). With $.ajax(), I get an alert with an empty message, while $.get() alerts "null". load.php ...

javascriptphpjqueryajaxget

The route path consists of data that will be retrieved before entering the route

I am facing an issue with my router configuration. I have a dynamic Route that requires the last part of its path to be set after fetching data from a store call in beforeRouteEnter. beforeRouteEnter (to, from, next) { if(to.params.categoryId) { next(vm ...

javascriptvue.jsvue-routerrouteparams

Creating a Draft.js selection with a specified start and end point

Looking for a way to replace the last insertion in Draft.js For instance, Original string -> aaazzz After inserting 'bbb' in the middle -> aaabbbzzz Replace last insert with 'ccc' -> aaaccczzz Replace last insert with &apos ...

javascriptreactjsdraftjs

Vue struggles to handle data coming from a composable function

For my specific case, I need to verify whether the user has subscribed to my product through both Stripe and Firebase. To accomplish this, I created a composable function that checks for the current subscription in the Firebase collection. If the user cur ...

javascriptfirebasevue.jsasync-awaitvuejs3

Transferring canvas element via socket with JS stack size limit

I'm encountering an issue where I need to transfer a canvas element over sockets using socket.io and Node.js. The code snippet below illustrates my approach: var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); // ...

javascripthtmlsocket.iohtml5-canvas

The art of revealing and concealing code blocks in AngularJS

I am currently working on a task in my AngularJS project. The requirement is that when both point directives within the md-autocomplete code are filled, the results directive should be displayed immediately without the need for any button. Additionally, if ...

javascriptangularjsangularjs-directiveangularjs-scope

Conceal a VueJS element using the v-if directive

I have developed a website where upon login, the username is stored in localStorage. This functionality is implemented in the Login.Vue file. login() { axios.post('/login', this.user) .then((response) => { alertify.set('notifier& ...

vue.js

Learn the process of assigning the present date using the jQuery UI date picker tool

I am looking to implement the feature of setting the current date using Angular/Jquery UI date picker. I have created a directive specifically for this purpose which is shown below: app.directive('basicpicker', function() { return { rest ...

javascriptjqueryangularjs

Loading images in a carousel with Vuetify

I am working on implementing a carousel using Vuetify to showcase some images. However, I have noticed that there is a white flash during the first slide transition, as if the image is not loaded until it begins rendering. <div id="app"> <v-app ...

vue.jsvuetify.js

Issue with onClientClick not functioning properly when performing a jQuery function call

How can I make a jQuery form appear when an ASP.NET server-side button is clicked by the user? Currently, when I click on the button during runtime, the page reloads quickly without displaying the jQuery form. I am aiming to achieve a similar effect show ...

javascriptjqueryhtmlasp.netonclientclick

Encountered a header error while attempting to proceed with the

In one of my routes, the following code is implemented: if (elements.length <= 0) { var msg = 'no elements found'; console.error(msg); var err = new Error('Not found'); ...

javascriptnode.jsexpresserror-handling

What is causing this setInterval function to run repeatedly?

Below is the code snippet from my Vue application: mounted: function () { this.timer = setInterval(async () => { if (this.progress >= 1) { this.progress = 1 clearInterval(this.timer) } console.log('update& ...

javascriptvue.jssetinterval

Boost Engagement with the jQuery PHP MySQL Like Feature

Seeking assistance in creating a like button with PHP, MySQL, and jQuery. I'm encountering an error but unable to pinpoint its source. Can anyone provide guidance? The project involves two pages: index.php & callback.php INDEX $k = 1; //POST ID $n ...

javascriptphpjqueryajax

Sending Location Data From JavaScript to PHP via Cookies

I encountered an issue while attempting to send Geolocation coordinates from JavaScript to PHP using Cookies. The error message I am receiving is: Notice: Undefined index: data in /Applications/XAMPP/xamppfiles/htdocs/samepage.php on line 24 The file name ...

javascriptphpajaxcookies

Adding a JSON array to HTML using JavaScript

Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...

javascripthtmljquery

My page is experiencing delays due to setInterval

Currently, I am delving into the world of Chrome Extension development and am faced with a roadblock in replacing elements on a live chat page. While most of my tasks are running smoothly, the one thing causing issues is the setInterval option that trigger ...

javascriptjqueryhtmlcss

Any tips on making Angular 8's sort table function seamlessly integrate with data retrieved from Firebase?

I am currently working on an angular PWA project that utilizes a material table to display data from Firebase. The data is being shown properly and the paginator is functioning as expected. However, I am facing an issue with sorting the data using mat-sort ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Is it possible to prevent the text from appearing in the text box when a button is

I have successfully implemented a feature where clicking on the button (click on me) in HTML displays a textbox along with another button (show) on the screen. The text written in the textbox is visible when the show button is clicked. However, after the i ...

javascripthtml

When utilizing jQuery to add a <li> element, it suddenly vanishes

? http://jsfiddle.net/AGinther/Ysq4a/ I'm encountering an issue where, upon submitting input, a list item should be created with the content from the text field. Strangely, it briefly appears on my website but not on the fiddle, and no text is appen ...

javascriptjqueryajaxhtml