VUE3 + IONIC - Property 'foo' does not exist on type '{ bar(): any; }'

Question

i have an error on vue3 + ionic, i try to make a component to get an image using computed and get a variable from props. Here is my code

Home.vue

<MenuIcon name="subscribe" fileName="subscribe.png" />

MyComponent.vue

export default { 
  name: 'MenuIcon',
  props: {
    name: String,
    fileName: String
  },
  computed: {
    iconPath(): any{     
      return require('../../public/assets/icon/icon menu/'+this.fileName)
    }
  }
}

i tried to change my fileName property to Object and change my iconPath property type to string or function, and still error. pls help

thanks before

Answer 1

I think your code has no problem but it is weird there is no error of this.filename when you are using ionic + vue + ts with export default {}

Can you try adding defineComponent and see if it helps?

import { defineComponent } from "vue";

export default defineComponent({
  name: "MenuIcon",
  props: {
    name: String,
    fileName: String,
  },
  computed: {
    iconPath(): any {
      return require("../public/assets/icon/" + this.fileName);
    },
  },
})