禁用@click事件Vuejs 2

Posted 2023-03-16

【中文标题】禁用@click事件Vuejs 2

【英文标题】：Disable @click event Vuejs 2

【发布时间】：2017-11-11 02:42:29

【问题描述】：

我有一个用作进度条的自定义表格，并在每个 td 上添加了 @click 事件，这些事件将重定向到特定页面。现在，行为应该是这样的：

用户无法向前跳，因此应禁用指向正确项目的 @click 事件。 返回时仅@click 事件起作用。

模板：

<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>

脚本：

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"
            
        

【问题讨论】：

对不起，我试图理解，你能更准确吗？想要发生什么？如果我点击其中一个会发生什么？

例如，我在relationship tab，当我点击skills tab时，我需要防止它重定向到那个，除非它是一个向后的过程。

不清楚你真正需要什么。也许这会有所帮助：事件有修饰符。例如@click.prevent="..." 阻止默认操作。文档：vuejs.org/v2/guide/events.html#Event-Modifiers

所以如果我有技能，我仍然可以返回关系选项卡吗？

@Kzy，没错！

【参考方案1】：

您需要实现一些逻辑来检查导航步骤是否处于活动状态。这是一个建议：

步骤列表：

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,
            
        
    

通用的转到下一步功能：

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

还有一个功能可以检查您要转到的步骤是否处于活动状态：

function checkDependanciesCompletion(dependencies) 
    let isCompleted = true;

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

    return isCompleted;

【讨论】：

尝试在方法之后插入步骤，但它显示module build failed 或者我错过了什么

应该在你的数据函数里，我已经更新了例子。这些函数应该放在你的方法对象中

是的，数据步骤缺少colon :) 顺便说一下模板中的@click 事件怎么样？我应该打电话给goTostep吗？

是的，比如：<td class="circle col-xs-2 col-xs-offset-1" @click="goToStep('relationship')">Relationship</td>

尝试了所有但没有运气checkDependanciesCompletion is not defined