CODEWITHSUNDEEP
vue.jsvuejs3vue-class-components
Hansinger
Hansinger

Reputation: 382

vue3 class component access props

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

Upvotes: 3

Views: 2326

Answers (2)

constantin
constantin

Reputation: 31

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>

Upvotes: 3

Lu&#237;s Daniel Sim&#245;es
Lu&#237;s Daniel Sim&#245;es

Reputation: 26

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;
  }
}

Upvotes: 0

Related Questions