Vue 3: How to update component props value correctly using composition api?

Question

I have like this component:

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

I tried update prop coords value with updateCoords method but I get error message:

Uncaught TypeError: Cannot set properties of undefined (setting 'coords')

How I can correctly update props value in my case?

tony19 · Accepted Answer · 2022-09-06 19:10:12Z

14

Props are readonly:
https://v3.vuejs.org/guide/component-props.html#one-way-data-flow

If you want to have two way binding for props, you'll need to implement the v-model pattern:
https://v3-migration.vuejs.org/breaking-changes/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>

edited Sep 6, 2022 at 19:10

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 11, 2021 at 12:47

Thomas

7,2805 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammadreza Khalilikhorram · Accepted Answer · 2023-11-02 21:52:59Z

0

if you want to update props and change it in vue 3 you must right your code according to your code like this:

<template>
  <div>
    <p>Current coords: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">
  </div>
</template>
<script>
export default {
  props: {
    componentPropsName: {
      type: Array,
      required: true
    }
  },
  emits: ['update: componentPropsName'],
  setup(props, {emit}) {
    const updateCoords = () => {
      emit('update:componentPropsName', [38.561785, -121.449756])
    }
    return {updateCoords}
  },
}
</script>

but the main point is to write your prop in a component in the parent component like this:

//parent component 
<child-component v-model:component-props-name="value"/>

edited Nov 2, 2023 at 21:52

answered Nov 1, 2023 at 23:00

Mohammadreza Khalilikhorram

5454 silver badges9 bronze badges

Collectives™ on Stack Overflow

Vue 3: How to update component props value correctly using composition api?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related