vue识别后台传送数据中唯一识别某条记录的id设置输入密码框

最近学习前端时有个需求，在一堆遍历生成的文章标题里，要给某篇文章设置进入密码。

大家都知道vue文件是由template、script、style三个部分组成的，template部分定义vue组件的模板内容，script定义vue组件的逻辑结构，style确定HTML标签样式。

原来的代码是在template中for语句循环生成后台传来的文章标题，然后@click=“script中的跳转文章内容页面函数”，于是我在想，怎样才能在遍历过程中和在调用函数前找到唯一识别这条标题的id，然后插入一个点击出现密码弹窗的事件，是的原本真打算在template里执行这些事（小白写代码[捂脸]）。

我、想、多、了！

感谢大佬的帮忙，在script的那个跳转文章内容页面函数里跳转页面前加入if判断就好了，于是记录一下代码

 if (file（形参）.id === id) {
        let key = prompt('请输入密码')   //  输入密码弹窗
        if (key !== '正确密码') {
          alert('密码错误')             //  密码错误弹窗
          return                       //  密码错误将停留在目前的文章标题列表页面
        }
      }
 //  密码正确即跳转至文章内容页面

运行结果

输入密码弹窗

密码错误弹窗