I have some problems getting props value (that is array actually) into my position api (setup). So I have ponent that is called DropDown, and I'm passing it some array of objects, and I need to do something like this:

export default {
  emits: ['update:modelValue'],
  props: {
    items: {
      type: Array,
      // required: true
    },
    modelValue: {
      type: [String, Number, Boolean],
      required: true
    }
  },

  setup({modelValue, props} : any, {emit} : any ) {
    let is_active = ref(false);
    let selected = ref({
        label: props.items[0].label,
        icon: props.items[0].icon,
        class: props.items[0].class
    });

as you see I have let selected that must have first object of items array, but it's not working. I'm listing items without problem on my template, but on setup I can't. Any ideas how to fix it?

btw: Best practise is to use like let selected = reactive(props.items[0]) but, it's not working like this as well.

I have some problems getting props value (that is array actually) into my position api (setup). So I have ponent that is called DropDown, and I'm passing it some array of objects, and I need to do something like this:

export default {
  emits: ['update:modelValue'],
  props: {
    items: {
      type: Array,
      // required: true
    },
    modelValue: {
      type: [String, Number, Boolean],
      required: true
    }
  },

  setup({modelValue, props} : any, {emit} : any ) {
    let is_active = ref(false);
    let selected = ref({
        label: props.items[0].label,
        icon: props.items[0].icon,
        class: props.items[0].class
    });

as you see I have let selected that must have first object of items array, but it's not working. I'm listing items without problem on my template, but on setup I can't. Any ideas how to fix it?

btw: Best practise is to use like let selected = reactive(props.items[0]) but, it's not working like this as well.

• javascript
• typescript
• vue.js
• vuejs3
• vue-position-api

1 Answer 1

The problem is your setup() is destructuring a props property from the props argument.

           props argument
      -------------------------
setup({modelValue, props} : any, {emit} : any) {
                   ^^^^^ ❌ props.props does not exist

However, destructuring the props argument should be avoided (as warned in the docs) because it removes the reactivity of the destructured prop.

The fix is to remove the destructuring from the props argument. Also, you can enable type inference for the props and context arguments by using the defineComponent() helper function from vue to define the ponent:

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(props, context) {
    let selected = ref({
      label: props.items[0].label,
      icon: props.items[0].icon,
      class: props.items[0].class
    });

    //...
  }
})