Hi All,
The @change event for checkbox is not working. The check($event) function is not be called.
How can I make this function to be called?
var dialog = this.$f7.dialog
.create({
title: “App User’s Consent Required”,
text: “”,
content:
“
” +
“
” +
“
” +
“
Privacy Policy
” +
“
Swift Alliance builds the CityGists App as a social network app. This SERVICE is provided by Swift Alliance at no cost and is intended for use as is.
” +
“
” +
“” +
“<input type=‘checkbox’” +
“
@change='check($event)'>” +
“
” +
“
I agree with the above conditions.
” +
“” +
“
” +
“
” +
“
” +
“
” +
“
”,
buttons: [{ text: "Decline", close: true }, { text: "I Agree" }],
onClick: (dialog, index) => {
if (index == 1) {
const app = this.$f7;
//var payload = {};
//payload.profileMessage = response;
//this.$store.dispatch("deleteAccount");
this.$f7router.navigate("/phoneverify/");
this.$f7.dialog.close();
app.panel.close();
} else {
}
},
on: {
open: function() {
//console.log("OPEN");
}
}
})
.open();
},
what you are trying to do wont work.
i would guess that you want to open a dialog “on demand”
var dialog = this.$f7.dialog({...})
thats fine, but since the dialog is created dinamically. you cant listen to events like @click @change, etc. Bcs the node was added dinamically.
you can add a class to your checkbox and with f7 listen to events
$$(’.my-element’).on(‘event’, doSomething)
Thanks pvtallulah, it worked as suggested. But I am finding it hard to update my data variable outside the DOM. I have tried many options. Within the DOM the variable is updated but the change is not reflecting in the template section.
See the code below:
data() {
return {
agreement: false
};
},
var $ = this.Dom7;
$(’[name=“demo-media-checkbox”]’).on(“change”, function(e) {
var self = this;
if (e.target.checked) {
//option 1
self.agreement = true
//option 2
$('[name="demo-media-checkbox"]').prop({
agreement: true
});
} else {
self.agreement = false;
}
});
How can I safely update the variable agreement so that the new value can be access in the template section. In template section {{agreement}} is always false.
Hi pvtallulah,
Just seeing your response. I have not tested this but believe it will solve the problem. I rearranged my codes and got it working within DOM7.
Thanks
I tried the codes :
var $ = this.Dom7;
$('[name="demo-media-checkbox"]').on("change", function(e) {
var self = this;
if (e.target.checked) {
self.$setState({
agreement: true
});
} else {
self.$setState({
agreement: false
});
}
});
},
I am getting this error:
Uncaught TypeError: self.$setState is not a function
at HTMLInputElement.eval
this
in your code make reference to the function on(“change”, function(e) {} not f7 instance. so use app.setState or where you have f7 instance