怎么样在vue模版文件里注册函数？

Question

公司里有一个项目要求用这个vaptcha作为验证码，前端框架选用的是vue，登录时要求传递验证码token。我看到文档里面写要用 vaptchaObj.getToken()来获取token，但是在methods里面使用时报错。怎么样在模版文件里注册 vaptchaObj 这个函数？

updated () {
    vaptcha({      //配置参数
      vid: '**********', // 验证单元id
      type: 'click', // 展现类型 点击式
      container: '#vaptcha-container' // 按钮容器，可为Element 或者 selector
    }).then(function (vaptchaObj) {
      vaptchaObj.render();//执行该方法, 生成验证码
    })
},
methods:{
    login: function(){
        var token = vaptchaObj.getToken();
        ...
    }    
}

Answer 1

vaptcha我没用过 但是它的包我看了一下 是非模块化的所以问题变成了如何处理一个非模块化的包那么办法就2种咯第一个就是在html里用script标签直接引入然后webpack里配置一下 具体你可以关键字搜索"webpack externals"大致的例子就是module.exports = {   entry: {     app: './src/main.js',   },   output: {     path: path.resolve(__dirname, '../dist/static'),     publicPath: './static/',     filename: '[name].js'   },   // CDN   externals: {    'vaptcha':'vaptcha',   }, }第二种么为了好看点，让你能够写个import vaptcha from 'vaptcha'可以用webpack别名的配置alias指定路径，这种方法会打在一起 不需要额外在script里引入大致如下resolve: {    //...     alias: {      'vaptcha': "你的路径/你的文件名.js"     } },plugins: [    //...     new webpack.ProvidePlugin({      vaptcha: 'vaptcha',      'window.vaptcha': 'vaptcha'     }) ],

Answer 2

这个很基础的问题，明显你这个vaptchaObj是在then方法里面获取的，就把值放在data里面啊data(){    return {        vaptchaObj: null     } }, updated () {    var it = this;     vaptcha({      //配置参数       vid: '**********', // 验证单元id       type: 'click', // 展现类型 点击式       container: '#vaptcha-container' // 按钮容器，可为Element 或者 selector     }).then(function (vaptchaObj) {       it.vaptchaObj = vaptchaObj       vaptchaObj.render();//执行该方法, 生成验证码     }) },methods:{    login: function(){        var token = this.vaptchaObj.getToken();         ...     }     }