i use vue3 with class-component in typescript my class looks like:
import {Options, Vue} from "vue-class-component";
#Options({
props: {
result: Object
}
})
export default class imageResult extends Vue {
currentImage = 0;
getSlides(){
console.log('result',this.$props.result); // not working
console.log('result',this.result); // not working too
}
My question is, how can i access and use the property within my class?
both this.result and this.$props.result throws me an error.
can someone help me?
Thanks in advance
late answer but maybe it helps someone in the future.
works for me with vu3 & typescript
<script lang="ts">
import { Vue, prop } from "vue-class-component";
export class Props {
result = prop<string>({ required: true });
}
export default class Foo extends Vue.with(Props) {
test(): void {
console.log(this.result);
}
}
</script>
My suggestion to you is to follow the documentation on using Typescript with vue using class component: enter link description here
in order to fix your code I think this should work:
import {Vue} from "vue-class-component";
import {Component} from "vue-class-component";
// Define the props by using Vue's canonical way.
const ImageProps = Vue.extend({
props: {
result: Object
}
})
// Use defined props by extending GreetingProps.
#Component
export default class ImageResult extends ImageProps {
get result(): string {
console.log(this.result);
// this.result will be typed
return this.result;
}
}
Related
I wanted to access the vue.data or methods in the plugin.
no matter what I tried several times, it didn't work.
such as eventBus, Mixin etc...
so I'm curious about the possibility to call the methods like that.
thank you for reading this question.
here is the custom component.
<template>
<div>
<v-overlay :value="isProcessing">
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
#Component
export default class ProgressCircular extends Vue {
private isProcessing: boolean;
startProcess() {
this.isProcessing = true;
}
}
</script>
and this is the plugin source.
import ProgressCircular from '#/components/ProgressCircular.vue';
import { VueConstructor } from 'vue';
import Vuetify from 'vuetify/lib';
import vuetify from './vuetify';
export default {
install(Vue: VueConstructor, options: any = {}) {
Vue.use(Vuetify);
options.vuetify = vuetify;
Vue.component('progress-circular', ProgressCircular);
Vue.prototype.$fireProgressing = function () {
// it didn't work
// I just wanted to access the method where in the Vue Component
// ProgressCircular.startProcess();
};
},
};
use the plugin syntax to extend vue like:
Vue.use({
install: Vue => {
Vue.prototype.$fireProgressing = () => {
};
}
});
or
Vue.use(YOURPLUGIN);
before you mount vue
I am in the process of updating vue2 to vue3 but encounter this problem.
I have a service called TService
// T.ts
class T {
public obj = { value: false };
constructor() {
setInterval(() => {
this.obj.value = !this.obj.value;
}, 1000);
}
}
const t = new T();
export { t as TService };
The service is very simple, it update it's obj value every 1 second.
Now come to the fun part
On vue2, I can do this:
<template>
<div> {{ test }} </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { TService } from './T;
#Component
export default class HelloWorld extends Vue {
public obj = TService.obj;
get test() {
return this.obj.value;
}
}
</script>
The test value updated on screen every 1sec and works as expected.
However, when I changed to vue3 with the below code, it does not work any more
<template>
<div>{{ test }}</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { TService } from './T';
#Options({})
export default class HelloWorld extends Vue {
public obj = TService.obj;
get test() {
return this.obj.value;
}
}
</script>
Not sure what is going on and appreciate if anyone can fix my code.
I am using latest vue 3.1.5 and vue-class-component 8.0.0-rc.1
You probably should make it reactive so Vue knows its value can be updated, see here
The anwser can be found in this post:
Changes made to an object created outside of Vue component are not detected by Vue 3
Basically I will need to wrap reactive around my object in my service
import { reactive } from 'vue';
// T.ts
class T {
public obj = reactive({ value: false });
constructor() {
setInterval(() => {
this.obj.value = !this.obj.value;
}, 1000);
}
}
const t = new T();
export { t as TService };
I am using Vue 3 with Composition API, and I want to use a third-party package (for example #meforma/vue-toaster), and it should be used like this (in Options API):
import Toaster from '#meforma/vue-toaster';
createApp(App).use(Toaster).mount('#app')
and then in the component:
this.$toast.show(`Hey! I'm here`);
this.$toast.success(`Hey! I'm here`);
this.$toast.error(`Hey! I'm here`);
this.$toast.warning(`Hey! I'm here`);
this.$toast.info(`Hey! I'm here`);
But this is not working inside the Composition API's setup() function.
#meforma/vue-toaster installs $toast on the application context, which can be accessed from getCurrentInstance().appContext.globalProperties in setup():
<template>
<button #click="showToast">Show toast</button>
</template>
<script>
import { getCurrentInstance } from 'vue'
export default {
setup() {
const $toast = getCurrentInstance().appContext.globalProperties.$toast
return {
showToast() {
$toast.show(`Hey! I'm here`)
$toast.success(`Hey! I'm here`)
$toast.error(`Hey! I'm here`)
$toast.warning(`Hey! I'm here`)
$toast.info(`Hey! I'm here`)
setTimeout($toast.clear, 3000)
}
}
}
}
</script>
i've the same issue.
So i've found and easy way to do:
I'm using Vite BTW.
my main.js
import { createApp } from 'vue'
import App from './App.vue'
import Toaster from '#meforma/vue-toaster';
let app = createApp(App)
app.use(Toaster, {
position: 'top-right'
}).provide('toast', app.config.globalProperties.$toast)
app.mount('#app')
my component:
import { inject } from 'vue'
export default {
name: 'table-line',
setup(props) {
const toast = inject('toast');
toast.success(`it works !`)
return {toast}
}
}
Hope it could be helpful
The setup function runs one-time before the component is created. It lacks the this context and may not be where you would want to place these anyway. You could try putting it into a method that you can call via a button.
So I work in a team that predominantly uses VSCode for the front-end work, I use Intellij myself as that's what I'm comfortable with. Issue is that when I go to format the code using Intellij it adds an initial indent to the code within <script> and <style> tags, it's not the worlds biggest issue - just a bit of a pain in the arse.
Their code would look like this:
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component
export default class CollapsibleSection extends Vue {
#Prop() public index: any;
#Prop() public value: any;
public isActive() {
return this.index === this.value;
}
}
</script>
My code would look like this:
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
#Component
export default class CollapsibleSection extends Vue {
#Prop() public index: any;
#Prop() public value: any;
public isActive() {
return this.index === this.value;
}
}
</script>
This will be fixed in the next major release, 2020.2, see WEB-30382.
For now, please try adding both script and style to the list of Do not indent children of in Settings | Editor | Code Style | HTML | Other
I have trouble importing an external class into a single file Vue component.
The component looks like this:
<style>
</style>
<template>
<div>
A page
</div>
</template>
<script>
import AClass from './js/aclass.js';
// -----------------------------------------
// I have also tried all the below options
// -----------------------------------------
// import default from '/js/aclass.js';
// import * from '/js/aclass.js';
// import '/js/aclass.js';
// import default from '/js/aclass';
// import AClass from '/js/aclass';
// import * from '/js/aclass';
// import { AClass } from '/js/aclass.js';
// const AClass = require('/js/aclass.js');
module.exports = {
data: function () {
return {
}
},
mounted: function(){
// console.log('ACLass', AClass);
},
destroyed: function(){
},
methods: {
},
}
</script>
and the class file looks like this:
class AClass {
constructor() {
return this
}
}
export AClass
or
export default class AClass {
constructor() {
return this
}
}
None of the options seem to work: all the options based on import generate an error that says ReferenceError: "responseText is not defined" and the ones based on require one that says ÀClass is not defined` (when the console.log line is uncommented).
I have resorted to loading the class in the window global in the Vue.js base app - but everyone says that's barbaric, and I would like to be able to delay the loading of the library (the real one is heavier, and somewhat rarely used).
I have checked the various answers such as this and this and this but it looks like the mere use of import in the component makes things go wrong.
The component itself is loaded like this
var app = new Vue({
el: '#app',
router: (new VueRouter({
routes: [
{ path: '/view/grid/:md5', component: httpVueLoader('components/view/grid.vue'), name: 'grid_md5' },
]
})),
});
I am sure the solution must be there somewhere, but after about three hours of banging my head against this, I will throw myself at the mercy of the StackOverflow crowd.