Question

111

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

rated 0 times [ 114] [ 3] / answers: 1 / hits: 12588 / 3 Years ago, thu, november 11, 2021, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

1 Jumping on the Clouds HackerRank

Wed, Oct 30, 19, 00:00, 5 Years ago

View All

answered 3 Years ago faithemilys · Accepted Answer

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>