Tengo algunos problemas para obtener el valor de los accesorios (que en realidad es una matriz) en mi api de composición (configuración). Así que tengo un componente que se llama DropDown, y le estoy pasando una serie de objetos, y necesito hacer algo como esto:
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 }); como puede ver, let selected que debe tener el primer objeto de la matriz de elementos, pero no funciona. Estoy enumerando elementos sin problema en mi plantilla, pero no puedo en la configuración. ¿Alguna idea para solucionarlo?
por cierto: la mejor práctica es usar como let selected = reactive(props.items[0]) pero, tampoco funciona así.
El problema es que su setup() está desestructurando una propiedad de props del argumento de props .
props argument ------------------------- setup({modelValue, props} : any, {emit} : any) { ^^^^^ ❌ props.props does not exist Sin embargo, se debe evitar desestructurar el argumento de props (como se advierte en los documentos ) porque elimina la reactividad del accesorio desestructurado.
La solución es eliminar la desestructuración del argumento props . Además, puede habilitar la inferencia de tipos para los props y los argumentos de context mediante el uso de la función auxiliar defineComponent() de vue para definir el componente:
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 }); //... } })