Tengo como este componente:
<template> <div> <p>Current coords: <strong>{{ coords }}</strong></p> <button type="button" @click="updateCoords"> </div> </template> <script> export default { props: { coords: { type: Array, required: true } }, setup(props) { const updateCoords = () => { props.coords = [38.561785, -121.449756] // props.coords.value = [38.561785, -121.449756] } return { updateCoords } }, } </script> Intenté actualizar el valor de updateCoords coords recibo un mensaje de error:
TypeError no capturado: no se pueden establecer propiedades de indefinido (estableciendo 'coords')
¿Cómo puedo actualizar correctamente el valor de los accesorios en mi caso?
Los accesorios son de solo lectura:
https://v3.vuejs.org/guide/component-props.html#one-way-data-flow
Si desea tener un enlace bidireccional para accesorios, deberá implementar el patrón v-model:
https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax
<template> <div> <p>Current coords: <strong>{{ coords }}</strong></p> <button type="button" @click="updateCoords"> </div> </template> <script> export default { props: { modelValue: { type: Array, required: true } }, emits: ['update:modelValue'], setup(props, {emit}) { const updateCoords = () => { emit('update:modelValue', [38.561785, -121.449756]) } return { updateCoords } }, } </script>