Setting the default type of an array in props in Vue 2 is a common need for many developers

Question

My Vue component relies on an array of objects as a prop and I always make use of prop validation, especially for setting default values.

In this case, my current setup is:

props: {
    items: Array
}

However, I would prefer it to resemble something like what we see in Typescript or React:

props: {
    items: Array.of(
        {key: {type: String, default: 'myText'}}
        )
}

Is there a way to accomplish this? If not, I might have to resort to using computed data to map the defaults.

Answer 1

Answer №1

In my example, I have created a jsFiddle link that could assist you. You can also set the default value as an array like this:

Using ES6 Syntax

props: {
    items: {
        type: Array,
        default: () => []
    }
}

Answer 2

In my example, I have created a jsFiddle link that could assist you. You can also set the default value as an array like this:

Using ES6 Syntax

props: {
    items: {
        type: Array,
        default: () => []
    }
}

Answer 3

Exploring ES6 Features for Arrays

props: {
  arr: {
    type: Array,
    default: () => []
  }
}

Diving into ES6 features for Objects

props: {
  obj: {
    type: Object,
    default: () => ({
      param: value,
      param2: value,
    })
  }
}

Further Reading:

Answer 4

Exploring ES6 Features for Arrays

props: {
  arr: {
    type: Array,
    default: () => []
  }
}

Diving into ES6 features for Objects

props: {
  obj: {
    type: Object,
    default: () => ({
      param: value,
      param2: value,
    })
  }
}

Further Reading:

Answer 5

If you're looking for a solution, consider giving this a try:

parameters: {
  info: {
    type: Array,
    necessary: true,
    preset: ()=> []
  }
}

Answer 6

If you're looking for a solution, consider giving this a try:

parameters: {
  info: {
    type: Array,
    necessary: true,
    preset: ()=> []
  }
}