Error after compiling when calling `this.$ons.notification.alert(…)` in Onsen, using Vue.js + TypeScript
I'm trying to call $ons methods of Onsen UI (2.11.5) in a Vue.js (2.5.17) + TypeScript (3.0.0) application.
It works fine when calling it inside the template, but it causes an error in the command line just after Compiled successfully when calling this.$ons.{method name} inside a Vue derived class.
The error is:
ERROR in /Users/max/.../src/views/TestOns.vue
Property '$ons' does not exist on type 'TestOns'. Did you mean '$on'?
But although there's a compiler error, the code works, so both alerts (1) and (2) are popped up.
<template>
<v-ons-page>
<app-header title="About" />
<div class="content about">
<!-- Next tag works fine, no errors -->
<v-ons-button @click="$ons.notification.alert('You clicked me (1)')">
Click me! (1)
</v-ons-button>
<!-- Next tag will call the method that causes an error -->
<v-ons-button @click="clickMe2()">
Click me! (2)
</v-ons-button>
</div>
</v-ons-page>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class TestOns extends Vue {
private clickMe2() {
// Next line causes a compiler ERROR, but it works nevertheless!
this.$ons.notification.alert('You clicked me! (2)')
}
}
</script>
And this is what I have in main.ts:
(...)
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
(...)
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
(...)
Vue.use(VueOnsen);
(...)
I came up with a workaround binding an attribute with a call to a function on the template:
<template>
<v-ons-page :set-ons="setOns($ons)">
...
</template>
@Component
export default class TestOns extends Vue {
...
private ons: any = undefined;
public setOns(ons: any): string {
console.log(ons);
this.ons = ons;
return '';
}
...
}
Then you can access by this.ons
this.ons.notification.alert('You clicked me! (2)')
You can also pass $ons as a parameter in the event, for instance, @click="clickMe($ons)".
But I'd like to know, why the compile error calling this.$ons inside the class, as told in Onsen UI documentation. And why an error if it actually works.
typescript vuejs2 onsen-ui
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
add a comment |
I'm trying to call $ons methods of Onsen UI (2.11.5) in a Vue.js (2.5.17) + TypeScript (3.0.0) application.
It works fine when calling it inside the template, but it causes an error in the command line just after Compiled successfully when calling this.$ons.{method name} inside a Vue derived class.
The error is:
ERROR in /Users/max/.../src/views/TestOns.vue
Property '$ons' does not exist on type 'TestOns'. Did you mean '$on'?
But although there's a compiler error, the code works, so both alerts (1) and (2) are popped up.
<template>
<v-ons-page>
<app-header title="About" />
<div class="content about">
<!-- Next tag works fine, no errors -->
<v-ons-button @click="$ons.notification.alert('You clicked me (1)')">
Click me! (1)
</v-ons-button>
<!-- Next tag will call the method that causes an error -->
<v-ons-button @click="clickMe2()">
Click me! (2)
</v-ons-button>
</div>
</v-ons-page>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class TestOns extends Vue {
private clickMe2() {
// Next line causes a compiler ERROR, but it works nevertheless!
this.$ons.notification.alert('You clicked me! (2)')
}
}
</script>
And this is what I have in main.ts:
(...)
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
(...)
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
(...)
Vue.use(VueOnsen);
(...)
I came up with a workaround binding an attribute with a call to a function on the template:
<template>
<v-ons-page :set-ons="setOns($ons)">
...
</template>
@Component
export default class TestOns extends Vue {
...
private ons: any = undefined;
public setOns(ons: any): string {
console.log(ons);
this.ons = ons;
return '';
}
...
}
Then you can access by this.ons
this.ons.notification.alert('You clicked me! (2)')
You can also pass $ons as a parameter in the event, for instance, @click="clickMe($ons)".
But I'd like to know, why the compile error calling this.$ons inside the class, as told in Onsen UI documentation. And why an error if it actually works.
typescript vuejs2 onsen-ui
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
add a comment |
I'm trying to call $ons methods of Onsen UI (2.11.5) in a Vue.js (2.5.17) + TypeScript (3.0.0) application.
It works fine when calling it inside the template, but it causes an error in the command line just after Compiled successfully when calling this.$ons.{method name} inside a Vue derived class.
The error is:
ERROR in /Users/max/.../src/views/TestOns.vue
Property '$ons' does not exist on type 'TestOns'. Did you mean '$on'?
But although there's a compiler error, the code works, so both alerts (1) and (2) are popped up.
<template>
<v-ons-page>
<app-header title="About" />
<div class="content about">
<!-- Next tag works fine, no errors -->
<v-ons-button @click="$ons.notification.alert('You clicked me (1)')">
Click me! (1)
</v-ons-button>
<!-- Next tag will call the method that causes an error -->
<v-ons-button @click="clickMe2()">
Click me! (2)
</v-ons-button>
</div>
</v-ons-page>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class TestOns extends Vue {
private clickMe2() {
// Next line causes a compiler ERROR, but it works nevertheless!
this.$ons.notification.alert('You clicked me! (2)')
}
}
</script>
And this is what I have in main.ts:
(...)
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
(...)
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
(...)
Vue.use(VueOnsen);
(...)
I came up with a workaround binding an attribute with a call to a function on the template:
<template>
<v-ons-page :set-ons="setOns($ons)">
...
</template>
@Component
export default class TestOns extends Vue {
...
private ons: any = undefined;
public setOns(ons: any): string {
console.log(ons);
this.ons = ons;
return '';
}
...
}
Then you can access by this.ons
this.ons.notification.alert('You clicked me! (2)')
You can also pass $ons as a parameter in the event, for instance, @click="clickMe($ons)".
But I'd like to know, why the compile error calling this.$ons inside the class, as told in Onsen UI documentation. And why an error if it actually works.
typescript vuejs2 onsen-ui
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
I'm trying to call $ons methods of Onsen UI (2.11.5) in a Vue.js (2.5.17) + TypeScript (3.0.0) application.
It works fine when calling it inside the template, but it causes an error in the command line just after Compiled successfully when calling this.$ons.{method name} inside a Vue derived class.
The error is:
ERROR in /Users/max/.../src/views/TestOns.vue
Property '$ons' does not exist on type 'TestOns'. Did you mean '$on'?
But although there's a compiler error, the code works, so both alerts (1) and (2) are popped up.
<template>
<v-ons-page>
<app-header title="About" />
<div class="content about">
<!-- Next tag works fine, no errors -->
<v-ons-button @click="$ons.notification.alert('You clicked me (1)')">
Click me! (1)
</v-ons-button>
<!-- Next tag will call the method that causes an error -->
<v-ons-button @click="clickMe2()">
Click me! (2)
</v-ons-button>
</div>
</v-ons-page>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class TestOns extends Vue {
private clickMe2() {
// Next line causes a compiler ERROR, but it works nevertheless!
this.$ons.notification.alert('You clicked me! (2)')
}
}
</script>
And this is what I have in main.ts:
(...)
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
(...)
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
(...)
Vue.use(VueOnsen);
(...)
I came up with a workaround binding an attribute with a call to a function on the template:
<template>
<v-ons-page :set-ons="setOns($ons)">
...
</template>
@Component
export default class TestOns extends Vue {
...
private ons: any = undefined;
public setOns(ons: any): string {
console.log(ons);
this.ons = ons;
return '';
}
...
}
Then you can access by this.ons
this.ons.notification.alert('You clicked me! (2)')
You can also pass $ons as a parameter in the event, for instance, @click="clickMe($ons)".
But I'd like to know, why the compile error calling this.$ons inside the class, as told in Onsen UI documentation. And why an error if it actually works.
typescript vuejs2 onsen-ui
typescript vuejs2 onsen-ui
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
edited Nov 23 '18 at 12:07
Max Oriola
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
asked Nov 23 '18 at 11:53
Max OriolaMax Oriola
46147
46147
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446227%2ferror-after-compiling-when-calling-this-ons-notification-alert-in-onsen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446227%2ferror-after-compiling-when-calling-this-ons-notification-alert-in-onsen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
