Array as prop for Vue.js component?

Question

I have a glorified input component called 'field', in which I have declared a number of props, thus:

 props: ['value','cols','label','group','name']

Given that this is effectively a fancy wrapper for an input, there are quite a few other attributes I might want to pass in as well, such as 'placeholder', for example. I don't really want to have to declare all of these in props (although the list is finite enough for it to be possible to do so, of course). What I'd prefer to do is to pass an array, perhaps called 'attrs', which could contain an arbitrary set of properties. Now I know it's possible to do this, but my question is how would I create this from within the parent? Can I do so with something like the following (although obviously with the requirement for bindings)?

 <field :attrs="['placeholder':'Whatever','length':42]"></field>

GuyC · Accepted Answer · 2016-11-25 11:31:27Z

6

that's an object not an array and yes it's fine to pass objects as props. Just set the values within the parent components data object, i.e.

data() {
  return {
    attributes: { 
      placeholder: 'Whatever',
      length: 42,
    },
    ...
  }
}

and bind this as your prop:

<field :attrs="attributes"></field>

To clarify - it is possible to set objects / arrays etc directly within the template, vue's template parser will then set the values on the relevant props, i.e.

<field :attrs="[{ name: 'foo' }, { name: 'bar' }]"></field>

However it is not a best practice as your templates soon get messy and it can become harder to determine where data is being set. Instead it is recommended that you abstract this data to a param on the component and bind that param to the prop - as above.

edited Nov 25, 2016 at 11:31

answered Nov 24, 2016 at 21:54

GuyC

6,6141 gold badge35 silver badges45 bronze badges

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

5 Comments

John Moore Over a year ago

Yes, you're right, in the form shown it's an object. But it could be an array of attribute objects, each with a name and value. The question, though, was whether it would be possible to define this from within the HTML where it's used, not from the JS. There will be multiple instances of this component used within the parent edit-form component, each with its own set of attributes.

GuyC Over a year ago

updated answer to confirm you can do this on the template - just not recommended

John Moore Over a year ago

Out of curiosity, why is not recommended? And what would my alternative be, if I want to use multiple Field instances on my form?

GuyC Over a year ago

the main reasons it's not recommended are listed above - i'd add that it makes the data you are passing to those props easier to set and update on the parent as well. Overall it's just a cleaner way of working. To apply data to multiple field components you'd simply create different params for each, i.e. attributesFoo: [{ ... }], attributesBar: [{ ... }], and then bind the required param (atttibutesFoo) to the prop of your relevant field component as above

GuyC Over a year ago

did this help explain things for you?

Collectives™ on Stack Overflow

Array as prop for Vue.js component?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related