Accessing props in setup function in Vue 3

Question

Accessing props in setup function in Vue 3

I am encountering issues when trying to access the props value (an array) in my composition API setup. The component I have is called DropDown, and I am passing it an array of objects. Here's what I need to achieve:

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 can see, I am using let selected to store the first object from the items array, but it doesn't seem to be working. I can display the items on my template without any issues, but facing problems in the setup. Any suggestions on how to resolve this?

By the way, the recommended practice is to use something like

let selected = reactive(props.items[0])

, but even that approach is not providing the desired outcome.

javascript typescript vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

The issue lies in your setup() function, where you are destructuring a props property from the props argument.

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

However, it is advised to avoid destructuring the props argument (as cautioned in the documentation) as it can lead to loss of reactivity for the prop.

To resolve this issue, refrain from destructuring the props argument. You can also enhance type inference for the props and context arguments by utilizing the defineComponent() helper function from vue when defining the component:

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
    });

    //...
  }
})

Answer 2

The issue lies in your setup() function, where you are destructuring a props property from the props argument.

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

However, it is advised to avoid destructuring the props argument (as cautioned in the documentation) as it can lead to loss of reactivity for the prop.

To resolve this issue, refrain from destructuring the props argument. You can also enhance type inference for the props and context arguments by utilizing the defineComponent() helper function from vue when defining the component:

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
    });

    //...
  }
})

Accessing props in setup function in Vue 3

Answer №1

Similar questions

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

Unveil concealed information within a freshly enlarged container

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

The update function in model.findByIdAndUpdate() is failing to make changes

Protected node.js REST API

Tips for validating user input in AngularJS without using a form tag

Randomly positioning an image while the page is loading

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

When creating a new instance of a class, I make sure to use the

Populate several input boxes with data derived from a single input field

What are the steps to execute Mike Bostock's D3 demonstrations?

Getting the Class name in Typescript

How should one handle the potential risks presented by literal types?

Unshifting values in a JavaScript array only if they exist in another array

Tips for adjusting the alignment of the Vuetify component "VDatePicker" based on the position of its parent component on the screen

The Javascript navigation bar is not displaying properly on mobile devices as it should

Creating interactive and adaptable maps

Unable to display modal pop-up in ASP.NET Core MVC web application

Vue 2 - Error: The function is not defined at HTMLInputElement.invoker (vue.esm.js?65d7:1810)TypeError: cloned[i].apply

The Angular 6 test command using npm has encountered a failure