set dynamic computed property in decorator VueJs Typescript

Question

I have a component that looks like this:

@Component({
    computed: {
        [this.stateModel]: {
            get() {
                return this.$store[this.stateModel];
            }
        }
    }
})
class Component extends Vue{
    @Prop({ default: '' }) private stateModel!: string;
}

Which I'm trying is bind stateModel as a property when I use this component. stateModel should be a field in the state and could be injected into the component. Typescript is throwing me an error that said:

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.

I tried to make an Interface and set it as computed, but it didn't work.

Any help is highly appreciate it.

If stateModel is a prop, are you trying to update the value of stateModel with that from the store when stateModel prop changes? — Tony
– Tony, Commented Sep 29, 2020 at 5:17
Hi @Tony, what I'm trying to do is inject a name property stateModel of the state — Jose Rojas
– Jose Rojas, Commented Sep 29, 2020 at 14:55
@Tony No, it didn't. stateModel is not a property, it should be dynamic. I mean, if I use <Component :stateModel="foo">, foo should be in the state. — Jose Rojas
– Jose Rojas, Commented Sep 30, 2020 at 15:35

Tony · Accepted Answer · 2020-09-29 05:18:57Z

1

I tried to use the this keyword in a computed property and I got two errors.

'this' cannot be referenced in a computed property name

'this' implicitly has type 'any' because it does not have a type annotation

Alternatively, you can use a watcher instead

import { Watch } from 'vue-property-decorator';

@Component
class Component extends Vue{
    ...

    @Watch('stateModel')
    stateModelHasChanged(newValue: number) {
      this.stateModel = this.$store[this.stateModel];
    }
    ...

}

answered Sep 29, 2020 at 5:18

Tony

1,4423 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

set dynamic computed property in decorator VueJs Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related