Alein
August 15, 2019, 6:14pm
1
Hello!
How to properly call a method from a function:
methods: {
startPay: function () {
var $ = this.$;
var app = this.$app;
var self = this;
var nav = this.$router;
console.log('start');
},
},
on: {
pageInit: function(e, page) {
var $ = this.$;
var app = this.$app;
var self = this;
var nav = this.$router;
$$(document).on('click', "a.go-to-pay", function (e) {
ref = $$(this).attr('id');
console.log(ref);
self.startPay();
});
},
}
Iβm trying to listen to click for dynamic data
1 Like
Instead of
$$(document).on('click', "a.go-to-pay", function (e) {
ref = $$(this).attr('id');
console.log(ref);
self.startPay();
});
do
$$('.go-to-pay').on('click', function(e){
ref = $$(this).attr('id');
console.log(ref);
self.startPay();
});
However, I do want to mention your code is quite messy. I would recommend using and editing one of the provided templates.
1 Like
Alein
August 15, 2019, 6:32pm
3
thank you!
i check your method, but it did not work for me.
How can I listen to clicks for dynamic links? here is my full code:
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">ΠΠ°Π·Π°Π΄</span>
</a>
</div>
<div class="title">
ΠΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π°Π»Π°Π½ΡΠ°
</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Π’Π΅ΠΊΡΡΠΈΠΉ Π±Π°Π»Π°Π½Ρ: </div>
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Π‘ΡΠΌΠΌΠ° ΠΏΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² ΡΡΠ±.</div>
<div class="item-input-wrap">
<input type="number" placeholder="1000" required validate pattern="[0-9]*" data-error-message="Π’ΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΡΡ!">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<button class="col button button-large button-fill" @click="selectCreditCard">ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ</button>
</div>
</div>
<div class="sheet-modal" id="creditCard" style="height:auto; --f7-sheet-bg-color: #fff;">
<div class="sheet-modal-inner">
<div class="page-content">
<div class="block-title">ΠΡΠ±ΠΎΡ Π±Π°Π½ΠΊΠΎΠ²ΡΠΊΠΎΠΉ ΠΊΠ°ΡΡΡ:</div>
<div class="list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<img src="img/pay/visa.png" width="40px">
</div>
<div class="item-inner">
<div class="item-title">*5235</div>
<div class="item-after">12/26</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<img src="img/pay/mc.png" width="40px">
</div>
<div class="item-inner">
<div class="item-title">*5235</div>
<div class="item-after">12/26</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<img src="img/pay/mir.png" width="40px">
</div>
<div class="item-inner">
<div class="item-title">*5235</div>
<div class="item-after">12/26</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media">
<img src="img/pay/default.png" width="40px">
</div>
<div class="item-inner">
<div class="item-title">*5235</div>
<div class="item-after">12/26</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
return {
data: function () {
var app = this.$app;
var userObj = JSON.parse(localStorage.getItem("user"));
var header = {
"alg": "HS256",
"typ": "JWT"
};
var data = {
"sessionId": userObj.sessionId
};
var secret = userObj.token;
var stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
var encodedHeader = app.methods.base64url(stringifiedHeader);
var stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(data));
var encodedData = app.methods.base64url(stringifiedData);
var signature = encodedHeader + "." + encodedData;
signature = CryptoJS.HmacSHA256(signature, secret);
signature = app.methods.base64url(signature);
signToken = encodedHeader + "." + encodedData + "." + signature;
return {
signToken: signToken
}
},
methods: {
startPay: function () {
var $ = this.$;
var app = this.$app;
var self = this;
var nav = this.$router;
console.log('start');
},
selectCreditCard: function () {
var $ = this.$;
var app = this.$app;
var self = this;
var nav = this.$router;
var dynamicSheet = app.sheet.create({
content:
'<div class="sheet-modal" id="creditCard" style="height:auto; --f7-sheet-bg-color: #fff;">'+
'<div class="sheet-modal-inner">'+
'<div class="page-content">'+
'<div class="block-title">ΠΡΠ±ΠΎΡ Π±Π°Π½ΠΊΠΎΠ²ΡΠΊΠΎΠΉ ΠΊΠ°ΡΡΡ:</div>'+
'<div class="list">'+
'<ul>'+
'<li>'+
'<a href="#" class="item-link item-content go-to-pay" id="20">'+
'<div class="item-media">'+
'<img src="img/pay/mc.png" width="40px">'+
'</div>'+
'<div class="item-inner">'+
'<div class="item-title">*5235</div>'+
'<div class="item-after">12/26</div>'+
'</div>'+
'</a>'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
,
swipeToClose: true,
closeByBackdropClick: true,
backdrop: true,
on: {
opened: function () {
console.log('Sheet opened');
}
}
});
dynamicSheet.open();
}
},
on: {
pageInit: function(e, page) {
var $ = this.$;
var app = this.$app;
var self = this;
var nav = this.$router;
$$('.go-to-pay').on('click', function(e){
ref = $$(this).attr('id');
console.log(ref);
self.startPay();
});
},
}
}
Assuming your dynamic sheet is opening, you have to do it in the sheets on open.
current you have [line 162]
on: {
opened: function () {
console.log('Sheet opened');
}
}
in there attach any on click events, example:
on: {
opened: function () {
console.log('Sheet opened');
$$('.go-to-pay').on('click', function(e){
alert("go to pay clicked!")
ref = $$(this).attr('id');
console.log(ref);
self.startPay();
});
}
}
2 Likes
Alein
August 15, 2019, 6:41pm
5
Thanks for the help!
This is a great solution and it works!
1 Like