My emit call is not getting called on my button click. I tried to run a debugger and step through it and it gets triggered but looks like it steps right through and skips it. I'm not sure what the issue is or why it's skipping.
Parent
<step-review #emitgetappdata="getAppData"></step-review>
getAppData: function(data=null) {
debugger
}
Step Review
<button #click="this.clickedButton()">Test</button>
clickedButton: function() {
console.log("reached here");
let data = {
text: "Foo",
}
this.$emit('emitgetappdata', data);
}
You can't use this on view
<button #click="clickedButton()">Test</button>
clickedButton() {
console.log("reached here");
let data = {
text: "Foo",
}
this.$emit('emitgetappdata', data);
}
and your component code to this a bit more clean.
<step-review #emitgetappdata="getAppData"></step-review>
getAppData(data=null) {
debugger
}
Edited after reading some docs :
https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods
Related
I'm pretty new to Vue and Snotify, so please forgive the newb question. I've scanned the docs, and nothing jumps out at me.
Here's the deal: I have a Vue component that deletes files, using a Snotify confirm box. Like this:
destroy() {
this.$snotify.confirm('', 'Delete File?', {
buttons: [
{
text: 'Yes',
action: (toast) => {
axios.delete([API endpoint])
.then(response => {
// destroy the vue listeners, etc
this.$destroy();
// remove the element from the DOM
this.$el.parentNode.removeChild(this.$el);
});
this.$snotify.remove(toast.id);
}
},
{
text: 'No',
action: (toast) => {
this.$snotify.remove(toast.id)
}
}
]
})
}
The problem is that if you click the "Delete" button a second time, another "Delete File?" confirmation appears above the first. Expected behavior is that the second click make the confirmation go away.
Any help you can offer would be greatly appreciated.
this.$snotify.confirm() returns the toast info, which includes an ID that could be passed to this.$snotify.remove() for removal:
export default {
methods: {
destroy() {
if (this._toast) {
this.$snotify.remove(this._toast.id, true /* immediate */)
}
this._toast = this.$snotify.confirm('', 'Delete File?', {/*...*/})
}
}
}
demo
I am using element ui el-image. And I want to preview my image when clicked with (:preview-src-list). But When I click first time it doesnt preview anything. just add's my downloaded image. So I need to click 2 times. But I want to click 1 time.
Here is my template code:
<el-image :src="src"
:preview-src-list="srcList"
#click="imgClick"></el-image>
ts code:
src = null;
srcList = [];
product = 'shoe1';
imgClick() {
prevImg(product).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.srclist = [url];
});
}
#Watch("product")
changed(value) {
getProductImage(value).then(resp => {
const url = window.URL.createObjectURL(new Blob([resp.data]));
this.src = url;
}).catc(e => {
alert(e);
});
}
mounted() {
this.changed(product);
}
I think these things happen because when you click on that image it will trigger clickHandler:
...
clickHandler() {
// don't show viewer when preview is false
if (!this.preview) {
return;
}
...
}
...
From source
And the preview is the computed property:
...
preview() {
const { previewSrcList } = this;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
}
...
From source
So nothing happened in the first click but after that you set preview-src-list and click it again then it works.
If you code is synchronous you can use event like mousedown which will trigger before click event.
<el-image
:src="url"
:preview-src-list="srcList"
#mousedown="loadImages">
</el-image>
Example
But if you code is asynchronous you can use refs and call clickHandler after that.
...
// fetch something
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
...
Example
I am trying to create a sound metering app with React Native, but it seems that if I start the metering, which I have as a infinite loop until the user stops it, it hangs the app.
Basically the user taps a button, invokes startMonitor(), then the runMonitor starts and checkSound() does a check for the current decibel level.
The relevant code section here
startMonitor() {
KeepAwake.activate();
this.setState({ monitorStatus: true
}, this.runMonitor );
}
runMonitor() {
while(this.state.monitorStatus) {
if(this.state.beginWait) {
this.wait(5000);
}
if(!this.state.isTransmitting) {
this.checkSound();
}
}
}
Any ideas on how to run a function continuously/infinite until the user cancels it?
You can use setInterval:
startMonitor() {
this.runMonitorIV = setInterval(runMonitor, 1000);
}
runMonitor() {
while(this.state.monitorStatus) {
if(this.state.beginWait) {
this.wait(5000);
}
if(!this.state.isTransmitting) {
this.checkSound();
}
}
}
//called on user event
stopMonitor() {
clearInterval(this.runMonitorIV);
}
(Not sure about your context or scope, but that's the basic idea)
There's also the TimerMixin that clears those timers triggers when a component unmounts.
I am working on creating a Polymer app for a pet project, using the Polymer Starter Kit, and modifying it to add horizontal toolbar, background images, etc. So far, everything has worked fine except the links in the app-toolbar do not update the "view" when I click on them.
All my debugging so far points me in the direction of the "page" property. I believe this is not getting updated or is null, causing the view to default to "about" (which is View-2 as per the starter kit) as specified in the _routePageChanged observer method.
I tried using the debugger on DevTools on Chrome, but being new to this, I'm not very clear if I did it correctly. I just kept going in and out of hundred of function calls.
I am copying relevant parts of the app-shell.
Please help or at least point me in the right direction; I've been trying to fix this since 2 days. Thank you!
<app-location
route="{{route}}">
</app-location>
<app-route
route="{{route}}"
pattern=":view"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" class="main-header" condenses effects="waterfall">
<app-toolbar class="logo"></app-toolbar>
<app-toolbar class="tabs-bar" hidden$="{{!wideLayout}}">
<paper-tabs selected="[[selected]]" attr-for-selected="name">
<paper-tab>Home</paper-tab>
<paper-tab>About Us</paper-tab>
<paper-tab>Pricing</paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="home"></my-view1>
<my-view2 name="about"></my-view2>
<my-view3 name="pricing"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
<script>
class MyApp extends Polymer.Element {
static get is() { return 'my-app'; }
static get properties() {
return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
wideLayout: {
type: Boolean,
value: false,
observer: 'onLayoutChange'
},
items: {
type: Array,
value: function() {
return ['Home', 'About', 'Pricing', 'Adults', 'Contact'];
}
},
routeData: Object,
subroute: String,
// This shouldn't be neccessary, but the Analyzer isn't picking up
// Polymer.Element#rootPath
// rootPath: String,
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)',
];
}
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'about';
console.log('_routePageChange');
// Close a non-persistent drawer when the page & route are changed.
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
}
_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl(page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
_showPage404() {
this.page = 'view404';
}
_onLayoutChange(wide) {
var drawer = this.$.drawer;
if (wide && drawer.opened){
drawer.opened = false;
}
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
Here's a snapshot of the page when I click on the "Home" link.
Snapshot of the page
I have fixed the same issue on my app, page observed functions like:
static get properties() { return {
page:{
type:String,
reflectToAttribute:true,
observer: '_pageChanged'},
...
_pageChanged(page, oldPage) {
if (page != null) {
if (page === "home" ) {
this.set('routeData.page', "");
} else {
this.set('routeData.page', page);
}
.......
}
}
Honestly, I am still trying to find the better solution. Because I have users page and I could not manage to able to indexed at google search results. This only keeps synchronized the iron-pages and address link.
I have following Java script class for custom widget. But it is not working. Non of the functions are called. Kindly help, not able to proceed further.
dojo.provide("FancyCounter");
dojo.require("dijit._Widget");
dojo.require("dojo.parser");
dojo.declare("FancyCounter",[dijit._Widget],
{
//counter
_i:0,
buildRendering: function()
{
//create DOM
this.domNode = dojo.create("button",{innerHTML:this._i});
},
postCreate: function()
{
this.connect(this.domNode,"onClick","increment");
},
increment:function()
{
//you need to update dom in order to refresh display i believe
this.domNode.innerHTML = ++this._i;
},
});
dojo.ready(function(){
dojo.parser.parse();
});
/////html code
<span data-dojo-type ="FancyCounter"></span>
Change
this.connect(this.domNode,"onClick","increment");
To
this.connect(this.domNode,"onclick","increment");
With lowercase 'c'. Youre connecting to an event on a DOM node, see http://www.w3schools.com/jsref/dom_obj_event.asp