5

I just wonder if I could do the code below less ugly.

In the component I have a property person. I'd like to use fields of the person object in my template without prepending each field with person.something. But the only way I know is below.

This is what I have atm:

(Please consider the code below as just an example, it's not a real one)

{
  name: 'Demo',
  props: {
    person: {
      type: Object,
      default: {}
    }
  },
  computed: {
    firstName() {
      return this.person.firstName
    },
    lastName() {
      return this.person.lastName
    },
    age() {
      return this.person.age
    },
    gender() {
      return this.person.gender
    }
  }
}

This is what I want to have instead (kind of):

{
  name: 'Demo',
  props: {
    person: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...this.person // <-- something like this would be better if only it would work
  }
}

Some assumptions

I assume that things like this should be possible, because we have mapGetters of vuex:

 computed: {
    ...mapGetters({ something: SOMETHING })
  },
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
eXception
  • 1,307
  • 1
  • 7
  • 22
  • It will not work - computed properties must be either a function or a pair of getter/setter. The spread operator can work `inside` a computed property - but in your case it will be simpler to just use the `person` object as a whole. – IVO GELOV Aug 05 '21 at 09:32

2 Answers2

5

With vue 3 or the composition api plugin for vue 2 you could use toRefs to spread the prop value inside the setup hook :

import {toRefs} from 'vue'//vue3
//import {toRefs} from '@vue/composition-api'//vue 2

export default{
  name: 'Demo',
  props: {
    person: {
      type: Object,
      default: {}
    }
  },
setup(props){

return {...toRefs(props.person)}
}

}
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
3

I see your point but what you want is not possible.

The main problem is this. We work with Options API. What is computed? An object that is passed into a Vue and Vue creates new instance with computed property for each function (or get/set pair) inside computed object. That means the spread operator is executed at the time component instance does not exist yet which means there is no this

mapGetters works because it's input are just static strings. If you had some static description of the Person object - for example some schema generated from Open API specification - you could create mapProperties helper and use it to generate computed props...

Edit: Yes, there is a way to create computed props dynamically in beforeCreate by modifying $options object - at least it was possible in Vue 2. Not sure about Vue 3. In both cases it is documented to be read only and Vue 3 is somehow more strict in forcing "read onlyness". However this is very different approach from the one in your question...

The approach is demonstrated for example here

tony19
  • 125,647
  • 18
  • 229
  • 307
Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • I see... this is pity. But just curious, in theory it's possible to create computed properties dynamically (inside `beforeCreated` maybe). So in theory I think it's possible to create a function like `mapGetters` which wrap object's fields and add them... But it's a mess for sure – eXception Aug 05 '21 at 11:03
  • 1
    @spabn Yes that approach is possible (updated my answer) but it has it's downsides. For example component using this approach requires the `person` prop value must be "complete" at the moment component is created - not `null` (usually with async) , no adding properties later etc. And the code is less readable too. I don't think it's worth it... – Michal Levý Aug 05 '21 at 11:43