Vue 3 : Comment mettre à jour correctement les valeurs des accessoires des composants à l'aide de l'API de composition ?

Question

J'aime ce composant :

<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>

J'ai essayé d'utiliser la valeur updateCoords 方法更新 prop coords mais j'ai obtenu l'erreur : 

Uncaught TypeError : impossible de définir la propriété non définie (définie 'Coordonnées')

Comment mettre à jour correctement la valeur des accessoires dans mon cas ?

Answer 1

Les accessoires sont en lecture seule :
https://v3.vuejs.org/guide/component-props.html#one-way-data-flow

Si vous souhaitez lier des accessoires de deux manières, vous devez implémenter le modèle v-model :
https://v3-migration.vuejs.org/break-changes/v-model.html#_3-x-syntax

sssccc