Disable @click event Vuejs 2

Question

I have a custom table that serves as a progress bar and added @click events on each td that will redirect to a specific page. Now, the behavior should be like this:

User can't skip forward so the @click event to the right items should be disabled.
Only @click event functions when going back.

Template:

<tr>
     <td class="circle col-xs-2 col-xs-offset-1"
             @click="goRelationship">Relationship</td>
     <td class="circle col-xs-2"
             @click="goSkills">Skills</td>
     <td class="circle col-xs-2"
             @click="goPurpose">Purpose</td>
     <td class="circle col-xs-2"
             @click="goFit">Fit</td>
     <td class="circle col-xs-2">Submit</td>
 </tr>

Script:

methods: {
            goRelationship: function () {
                window.location.href = "/v2/review/relationship"
            },
            goSkills: function () {
                window.location.href = "/v2/review/skills"
            },
            goFit: function () {
                window.location.href = "/v2/review/fit"
            },
            goPurpose: function () {
                window.location.href = "/v2/review/purpose"
            }
        }

sorry im trying to understand, can you be more precise? What do want to happen? What will happen If I click a one of them? — Kzy
– Kzy, Commented Jun 9, 2017 at 7:31
For example, I'm at relationship tab and when I click on the skills tab, I need to prevent it to redirect to that unless it's a backward process. — claudios
– claudios, Commented Jun 9, 2017 at 7:38
It's unclear what you actually need. Maybe this helps: there are modifiers for events. for example @click.prevent="..." prevents default action. Docs: vuejs.org/v2/guide/events.html#Event-Modifiers — Egor Stambakio
– Egor Stambakio, Commented Jun 9, 2017 at 7:50

claudios · Accepted Answer · 2017-06-09 09:56:12Z

1

You will need to implement some logic to check if navigation steps are active or not. Here is a suggestion:

List of steps:

data() {
    return {
        steps: {
            relationship: {
                dependancies: [],
                completed: false,
            },
            skills: {
                dependancies: ['relationship'],
                completed: false,
            },
            fit: {
                dependancies: ['relationship', 'skills'],
                completed: false,
            },
            purpose: {
                dependancies: ['relationship', 'skills', 'fit'],
                completed: false,
            }
        }
    }
}

A generic go to next step function:

goToStep(stepName) {
    if (checkDependanciesCompletion(this.steps[stepName].dependancies)) {
        window.location.href = `/v2/review/${stepName}`
    }
}

And a function to check if step that you want to go to is active:

function checkDependanciesCompletion(dependencies) {
    let isCompleted = true;

    dependencies.forEach((dep) => {
        if (!this.steps[dep].completed) {
            isCompleted = false;
        }
    });

    return isCompleted;
}

edited Jun 9, 2017 at 9:56

claudios

6,6768 gold badges51 silver badges98 bronze badges

answered Jun 9, 2017 at 7:57

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

claudios Over a year ago

tried inserted the steps, after the methods but it says module build failed or I missed something

Nora Over a year ago

It should be in your data function, I have updated the example. The functions should go in your methods object

claudios Over a year ago

Yes, the data steps lacks colon :) by the way how about the @click event from the template? should i call goTostep?

Nora Over a year ago

Yes, like: <td class="circle col-xs-2 col-xs-offset-1" @click="goToStep('relationship')">Relationship</td>

claudios Over a year ago

tried all but no luck checkDependanciesCompletion is not defined

Collectives™ on Stack Overflow

Disable @click event Vuejs 2

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related