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

Is it possible to determine whether a path leads to a directory or a file?

Is it possible to distinguish between a file and a directory in a given path? I need to log the directory and file separately, and then convert them into a JSON object. const testFolder = './data/'; fs.readdir(testFolder, (err, files) => { ...

javascriptnode.jsexpress

What is the correct way to establish the value of an editable div element?

When working with input and other elements that have a value, I usually use Object.getOwnPropertyDescriptor(input, 'value').set; followed by element.dispatchEvent(new Event('input', {bubbles: true})). However, this approach does not wor ...

javascriptreactjs

The statement ... is not a valid function, it has returned undefined

Currently experimenting with AngularJS, encountered an error message: Argument 'Controller' is not a function, got undefined View the JSFiddle link, along with HTML code: <h2>Hata's Tree-Like Set</h2> <div ng-app ng-init="N=3 ...

javascriptangularjs

Inertia: A guide to sending parameters to Laravel controller

Currently, I am in the process of working on a small-scale project referred to as a testing playground. I possess some data: data() { return { form: this.$inertia.form({ id: "", name: "", email: &quo ...

laravelvue.jsinertiajs

Suggestions for rectifying the calculation script to include the price, a phone number, 2 digits, and integrating a textfield for cost

I have developed a script that calculates prices, phone numbers, and extracts the last 2 digits from the phone number. In my website, the price is displayed through a select option. However, I am facing an issue where the cost does not automatically updat ...

javascriptjqueryajax

Text that changes within a set-sized box

I'm working with a fixed-size div that contains dynamically generated text. Is there an easy method using DOJO or plain Javascript to truncate the text before the end of the div and add "..."? How can I accomplish this regardless of the font size bein ...

javascripthtmldojo

To include a request parameter in every HTTP request made with $http in AngularJS

I am looking to utilize Angular's $http service to communicate with an API. However, I need to find a way to save my authorization token within $http so that it is included in every request, whether it is a post, get, put, or delete request. I have ob ...

javascriptangularjs

Create a regular expression that matches a combination of alphabets and spaces, but does not allow for

Can anyone provide a regular expression that allows for a combination of alphabets and spaces, but not only spaces? After searching extensively and reading numerous articles, I came across the expression /^[a-zA-Z\s]*$/, which unfortunately permits j ...

javascriptjqueryregexwebpattern-matching

Wait for AngularJS to load when the background image of a div becomes visible

Currently, I am utilizing the ng-repeat feature to fetch data from a $http.post request and then save it to the $scope.data variable. <div ng-repeat="key in [] | range:data.pages"> <div class="pageBackground" id="page_{{ (key+1) }}" ng-style= ...

javascripthtmlcssangularjs

Prevent $.ajax with jQuery when a button is clicked

Is there a way to interrupt the $.ajax() function execution by clicking on this button: <button class="stop">Stop</button> Is there a specific function that can cause the $.ajax() call to stop? Note: The $.ajax script is within a function, l ...

javascriptajaxjquery

Increase the size of the textarea when it is clicked on and revert back to its original size when it

My question revolves around a text area that I am trying to manipulate through jQuery. The desired functionality is to increase the height of the text area whenever someone clicks on it, and decrease the height when clicking anywhere else on the screen. & ...

javascriptjqueryhtml

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...

javascriptjqueryhtmlcssangularjs

How can JavaScript/jQuery be used to update LocalStorage Objects when editing a form?

Having trouble pinpointing an issue with my code. Despite making modifications, the values in localStorage are not updating as expected. Any suggestions on what may be causing this problem? Note: Changing const idx to const i resulted in only the final va ...

javascriptjqueryarraysjsonlocal-storage

Display 'Div 1' and hide 'Div 2' when clicked, then reveal 'Div 2' and hide 'Div 1' when a different button is clicked

I need help figuring out how to make two separate buttons work. One button should display 'Div 1' and hide 'Div 2', while the other button should show 'Div 2' and hide 'Div 1' when clicked. My knowledge of jquery an ...

javascriptjqueryhtmlcss

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...

javascriptajaxhtmlapi

Incorporating External JavaScript and CSS specifically for a single component

In my Angular 4 application, I have a specific component that requires the use of a js and css file. While most guidelines suggest placing these files in the Index.html file, I prefer to only load them when this particular component is accessed, not on e ...

javascriptangularwebpack

What is the best way to use jQuery to fill a dropdown menu with options from a JSON object?

Looking to populate a dropdown box #dropdown with values from a json object stored in a JavaScript string variable. How can I access each element as value/label pairs and insert them into the dropdown? The structure of the json string is as follows: [{"n ...

javascriptjqueryjson

Encountering a problem with GraphQL API fetching in Next.js: receiving the error message "React functionality 'useContext' is not supported in this environment."

Currently, I have developed a Next.js 14.2.3 application with a GraphQL API endpoint (which I replaced with localhost for StackOverflow). For data fetching, I am utilizing "@apollo/client": "^3.10.3" and "graphql": "^16.8.1". The product page path has been ...

javascriptreactjsnext.jsgraphql

Exploring the $scope variable in AngularJS using JavaScript

How can I assign values to $scope.dragged and $scope.dropped in a JavaScript function? function drag(e){ e.dataTransfer.setData("text/html", e.target.id); console.log(e.target.id); $scope.dragged = e.target.className; } function drop(e){ ...

javascriptangularjsscopeset

Creating an HTML string and then displaying its outer HTML in IE10 can be easily achieved. Just write the

My task is to write an HTML string to an element and then retrieve the resulting outer HTML from that element. This needs to be operational in IE10, latest versions of FF, Chrome, Safari, Android, iOS Safari but does not have to support any older browsers. ...

javascriptinternet-explorerdom