How to register a function in a vue template file?
there is a project in the company that requires this vaptcha to be used as the CAPTCHA. The front-end framework chooses token, the CAPTCHA code passed when vue, logs in. I saw that it was written in the document to use vaptchaObj.getToken () to get token, but it was wrong to use Times in methods. How to register the function vaptchaObj in the template file?
updated () {
vaptcha({
//
vid: "**********", // id
type: "click", //
container: "-sharpvaptcha-container" // Element selector
}).then(function (vaptchaObj) {
vaptchaObj.render();//,
})
},
methods:{
login: function(){
var token = vaptchaObj.getToken();
...
}
}
vaptcha I haven't used, but I looked at the package that is non-modular
, so the question becomes how to deal with a non-modular package
so there are two ways
the first is to introduce
directly with the script tag in html, and then configure it in webpack. You can keyword search for "webpack externals"
. The general example is
.
module.exports = {
entry: {
app: './src/main.js',
},
output: {
path: path.resolve(__dirname, '../dist/static'),
publicPath: './static/',
filename: '[name].js'
},
// CDN
externals: {
'vaptcha':'vaptcha',
},
}
the second
in order to look good, you can write an import vaptcha from 'vaptcha'
and specify the path with the configuration alias of the webpack alias. This method will be put together without the need to introduce
into the script. This is roughly as follows
.
resolve: {
//...
alias: {
'vaptcha': "/.js"
}
},
plugins: [
//...
new webpack.ProvidePlugin({
vaptcha: 'vaptcha',
'window.vaptcha': 'vaptcha'
})
],
this is a very basic question. Obviously, your vaptchaObj is obtained in the then method, so put the value in data
.
data(){
return {
vaptchaObj: null
}
},
updated () {
var it = this;
vaptcha({
//
vid: '**********', // id
type: 'click', //
container: '-sharpvaptcha-container' // Element selector
}).then(function (vaptchaObj) {
it.vaptchaObj = vaptchaObj
vaptchaObj.render();//,
})
},
methods:{
login: function(){
var token = this.vaptchaObj.getToken();
...
}
}
