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

In the ponent 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: {}
    }
  },
  puted: {
    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: {}
    }
  },
  puted: {
    ...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:

 puted: {
    ...mapGetters({ something: SOMETHING })
  },

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

In the ponent 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: {}
    }
  },
  puted: {
    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: {}
    }
  },
  puted: {
    ...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:

 puted: {
    ...mapGetters({ something: SOMETHING })
  },

• javascript
• vue.js
• vuejs2
• frontend
• vuejs3

• It will not work - puted properties must be either a function or a pair of getter/setter. The spread operator can work inside a puted property - but in your case it will be simpler to just use the person object as a whole. – IVO GELOV Commented Aug 5, 2021 at 9:32

2 Answers 2

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' // Vue 3
// import { toRefs } from '@vue/position-api' // Vue 2

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

More information about toRefs()

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

The main problem is this. We work with Options API. What is puted? An object that is passed into a Vue and Vue creates new instance with puted property for each function (or get/set pair) inside puted object. That means the spread operator is executed at the time ponent 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 puted props...

Edit: Yes, there is a way to create puted 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