How to bind an empty array to the props in Vue.js3?

Question

<script lang="ts" setup>   
  interface Props {
    bigArray: string[];
  }
        
  ***const props = withDefaults(defineProps<Props>(), {
    bigArray:[],
  }*** <---- Here is the error, setting props
        
  const bigArray = ref(props.BigArray);
</script>

ITsInterface.ts

BigArray?: string[] | null;

Looking for the proper way to set up an empty array as a prop in this scenario:

Vue.js3
composition API
TypeScript
setup in script tag

h0p3zZ · Accepted Answer · 2022-05-17 18:25:58Z

11

import { withDefaults, defineProps} from "vue";

interface Props {
    bigArray?: string[]
}

const props = withDefaults(defineProps<Props>(), {
    bigArray: () => []
})

console.log(props.bigArray);

You just needed to add the () => arrow-function for it to work.

This is shown here in the vue documentation.

And if you want to make the prop optional (as it should be with a default value) use ? after the variable-name. This will ensure there are no unnecessary warnings in the console.

answered May 17, 2022 at 18:25

h0p3zZ

7374 silver badges21 bronze badges

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

2 Comments

Whitespacecode Over a year ago

I was looking for a solution to have a prop with multiple products but when there are no products i want a default array. Not sure why but adding '() => [],' instead of '[]' fixed the issue. type PropTypes = { products: Product[], } const props = withDefaults(defineProps<PropTypes>(), { products: () => [], });

h0p3zZ Over a year ago

@Whitespacecode so my solution works? - if so feel free to upvote the answer, or do you need any further assistance?

h0p3zZ · Accepted Answer · 2022-05-12 00:00:29Z

-1

As shown in the vue documentation here.

You could do it like that:

const props = defineProps({
  bigArray: {
    type: Array,
    default: []
  }
});

This defines a prop with the name bigArray and sets the default to an empty array.

answered May 12, 2022 at 0:00

h0p3zZ

7374 silver badges21 bronze badges

2 Comments

randomfool Over a year ago

I appreciate the feedback, but the prop has been set as a type: string previous in the interface

h0p3zZ Over a year ago

@randomfool yeah i know - i thought you just need one option. Didn't know you want/need the interface - will take a further look at this later

Collectives™ on Stack Overflow

How to bind an empty array to the props in Vue.js3?

ITsInterface.ts

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ITsInterface.ts

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related