When Vue is clicked, it appears to trigger multiple methods simultaneously

Question

When Vue is clicked, it appears to trigger multiple methods simultaneously

Currently, I am learning Vue and encountered a problem that I need help with.

When using the v-on:click directive to call a method, all other instance methods are also called when the same method is used elsewhere.

HTML:

<div id="exercise">
    <div><button class="test" v-on:click="newCheck()">New Challenge</button>
        <p >Success check is: {{ passCheck }}</p>
    </div>
    <div>
        <button class="roll" v-on:click="roll20()">Roll!</button>
        <p>You Rolled a {{ roll20() }}</p>
    </div>
</div>

JS:

new Vue({
    el: '#exercise',
    data: {
        yourRoll: '10',
        passCheck: '10',    
    },
    methods: {
        roll20: function(){
            this.yourRoll = Math.round(Math.random()*19)+1;
            return this.yourRoll;
        },
        newCheck: function(){
            this.passCheck = Math.round(Math.random()*19)+1;
        }
    }
});

If {{ roll20() }} is used in the second paragraph, clicking the 'New Challenge' button triggers both roll20() and newCheck(). However, if {{ yourRoll }} is used instead, this doesn't happen.

Regardless, clicking 'Roll!' only executes the roll20() method.

Could someone please explain what exactly is happening here?

You can find a codepen illustrating the issue here: Codepen of code

Note: I managed to work around this problem by adopting a different approach, but I am still curious as to why this behavior occurred: Working Approach

javascript vue.js vuejs2

Answer 1

Answer №1

If there are updates to the DOM, it will trigger the execution of roll20 again, thanks to this line:

<p>You Rolled a {{ roll20() }}</p>

This means that any change triggering an update will also trigger the roll20 function.

Let's consider the following template scenario:

<div><button class="test" v-on:click="newCheck()">New Challenge</button>

Pressing the New Challenge button will call the newCheck method.

Furthermore, since the newCheck method modifies a variable (passCheck) used in the template:

    newCheck: function(){
        this.passCheck = Math.round(Math.random()*19)+1;
    }

This variable is then utilized here:

    <p>Success check is: {{ passCheck }}</p>

Changing the value of

passCheck</code will provoke a DOM update, which in turn triggers the execution of <code>roll20</code (as explained in the first paragraph).</p>

<hr>

<h1>Solving the issue:</h1>

<p>A simple solution would be to avoid calling <code>roll20

directly in the template. Given that roll20 actually updates a property named yourRoll:

    roll20: function(){
        this.yourRoll = Math.round(Math.random()*19)+1;
        return this.yourRoll;
    },

You can simply use yourRoll directly in the template instead of calling roll20():

<p>You Rolled a {{ yourRoll }}</p>

CodePen example: https://codepen.io/acdcjunior/pen/PePBeo

Answer 2

If there are updates to the DOM, it will trigger the execution of roll20 again, thanks to this line:

<p>You Rolled a {{ roll20() }}</p>

This means that any change triggering an update will also trigger the roll20 function.

Let's consider the following template scenario:

<div><button class="test" v-on:click="newCheck()">New Challenge</button>

Pressing the New Challenge button will call the newCheck method.

Furthermore, since the newCheck method modifies a variable (passCheck) used in the template:

    newCheck: function(){
        this.passCheck = Math.round(Math.random()*19)+1;
    }

This variable is then utilized here:

    <p>Success check is: {{ passCheck }}</p>

Changing the value of

passCheck</code will provoke a DOM update, which in turn triggers the execution of <code>roll20</code (as explained in the first paragraph).</p>

<hr>

<h1>Solving the issue:</h1>

<p>A simple solution would be to avoid calling <code>roll20

directly in the template. Given that roll20 actually updates a property named yourRoll:

    roll20: function(){
        this.yourRoll = Math.round(Math.random()*19)+1;
        return this.yourRoll;
    },

You can simply use yourRoll directly in the template instead of calling roll20():

<p>You Rolled a {{ yourRoll }}</p>

CodePen example: https://codepen.io/acdcjunior/pen/PePBeo

Answer 3

Answer №2

<div id="exercise">
        <div><button class="test" v-on:click="newCheck()">Start New Challenge</button>
    <p >Success status: {{ passCheck }}</p>
    <!-- 3) Invoke a function to generate a random float between 0 and 1 (Math.random()) -->
        </div>
        <div>
        <button class="roll" v-on:click="roll20()">Roll Dice!</button>
    <p>You Got: {{ yourRoll }}</p> <!-- this changed -->
        </div>
</div>

new Vue({
    el: '#exercise',
    data: {
        yourRoll: '10',
        passCheck: '10',    
    },
    methods: {
        roll20: function(){
            this.yourRoll = Math.round(Math.random()*19)+1;
        },
        newCheck: function(){
            this.passCheck = Math.round(Math.random()*19)+1;
        }
    }
});

Give it a try, it works perfectly! Just remember to access your data property instead of calling the method directly! See it in action

Answer 4

<div id="exercise">
        <div><button class="test" v-on:click="newCheck()">Start New Challenge</button>
    <p >Success status: {{ passCheck }}</p>
    <!-- 3) Invoke a function to generate a random float between 0 and 1 (Math.random()) -->
        </div>
        <div>
        <button class="roll" v-on:click="roll20()">Roll Dice!</button>
    <p>You Got: {{ yourRoll }}</p> <!-- this changed -->
        </div>
</div>

new Vue({
    el: '#exercise',
    data: {
        yourRoll: '10',
        passCheck: '10',    
    },
    methods: {
        roll20: function(){
            this.yourRoll = Math.round(Math.random()*19)+1;
        },
        newCheck: function(){
            this.passCheck = Math.round(Math.random()*19)+1;
        }
    }
});

Give it a try, it works perfectly! Just remember to access your data property instead of calling the method directly! See it in action

When Vue is clicked, it appears to trigger multiple methods simultaneously

Answer №1

Answer №2

Similar questions

Infusing JavaScript with vibrant images

Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Integrate new functionality into the plugin's JavaScript code without directly editing the JS file

The form data should persist even if the user switches screens or logs out of the session, ensuring that the information remains intact

What could be causing the QullJS delta to display in a nonsensical sequence?

Error: CSRF token not found or invalid. What is the procedure for transmitting a CSRF token from the frontend to the backend?

What is the best way to selectively remove Tailwind styles from a single Vue component?

Preserve the chosen List group element with Vue.js

Tips for updating a nested MongoDB object

Is utilizing v-model to update the Vuex store a recommended practice?

transferring attributes from a component iterated over to a component it renders

Display a clock showing the Central Standard Time (CST) on an HTML webpage using

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3

Hey there! I'm currently facing some difficulties with storing form input data into a nested json file

Can security groups be dynamically updated using a JSON file in JavaScript rather than relying on manual parameters?

Is there a way to use JavaScript or jQuery to identify if Firefox is blocking mixed content

Give the Row ID as a parameter to a personalized component within MUI Datagrid Pro

how to load CSS and JS files on certain views in Laravel 5.2

What could be causing my JavaScript code to not function properly in an HTML document?

How can I apply and delete a css class only while scrolling in a React application?