How to pass object's attribute as prop to vue.js component

Question

Given the following component:

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object,
      default () {
        return {
          attribute: 0,
          otherAttribute: 5
        }
      }
    }
  },
  data () {
    return {
      attribute: this.blueprint.attribute,
      otherAttribute: this.blueprint.otherAttribute
    }
  }
}
</script>

I want to use the blueprint prop to populate data fields with some default values which could also be defined when using the component.

But how can I pass only one field of prop blueprint? When I do this:

<my-component :blueprint="{attribute: someVar}" />

the otherAttribute of the default blueprint will be gone, of course.

Can I only set the one field of the prop and merge it with the default of the other, something like this:

<my-component :blueprint.attribute="someVar" />
<!-- It doesn't work like this, but maybe you get the idea what I want -->

Sadly the blueprint prop has too many fields to pass each field on it's own.

MyComponent is built by you or it comes from other libraries? — Shahadat Hossain
– Shahadat Hossain, Commented Feb 27, 2020 at 11:25
It is built by me. And I think I found a solution now, thanks! — arkuuu
– arkuuu, Commented Feb 27, 2020 at 11:43

Shahadat Hossain · Accepted Answer · 2020-02-27 11:53:22Z

1

yeah, your Answer is fine. Here is my solution

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object
    }
  },
  data () {
    return {
      blueprintDefault: {
          attribute: 0,
          otherAttribute: 5 
      }
    }
  },
  mounted () {
   this.blueprint = {...this.blueprintDefault, ...this.blueprint}
  }
}
</script>

answered Feb 27, 2020 at 11:53

Shahadat Hossain

97910 silver badges27 bronze badges

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

Comments

arkuuu · Accepted Answer · 2020-02-27 11:41:56Z

I found a solution that seems to work for me. My component now looks like this:

<script>
export default {
  name: 'MyComponent',
  props: {
    blueprint: {
      type: Object
    }
  },
  data () {
    return {
      attribute: this.blueprint.attribute ?? 0,
      otherAttribute: this.blueprint.otherAttribute ?? 5
    }
  }
}
</script>

I removed the default part of the prop and now set the default values directly in the data instead. That way if my blueprint prop does not include all attributes, the other default values will still be there.

Collectives™ on Stack Overflow

How to pass object's attribute as prop to vue.js component

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related