[Vuejs]-How can I access props for computed in Vue Typescript?

by

1👍

✅

Accessing through this is correct, but Typescript complains because this.color might be undefined. You can either set the property to required, or have your computed theme deal with undefined.

Here it is with a required color:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    color: {required: true, type: String}, // <--- make color required
    shape: String,
  },
  computed: {
    theme(): string {
      const args: string[] = this.color.split('-') // <--- access with `this`
      let var_1:string = args[0]

      return var_1
    }  
  }
})
</script>

or you can deal with undefined values with something like:

    theme(): string {
      return this.color?.split('-')[0] ?? ''
    }
👤Moritz Ringler

Leave a comment