Vue 3: The correct way to properly update component props value with the composition api

Question

Vue 3: The correct way to properly update component props value with the composition api

I have a component similar to this one:

<template>
  <div>
    <p>Current coordinates: <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 attempted to update the prop coords value using the updateCoords method but encountered an error message:

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

How can I correctly update the prop value in my situation?

javascript vue.js vue-component vuejs3 vue-props

Answer 1

Answer №1

Props in Vue.js components are read-only by default:
Learn more about one-way data flow

If you need two-way binding for props, you can implement the v-model pattern:
Understand the 3.x syntax changes

<template>
  <div>
    <p>Current coordinates: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">Update Coordinates</button>
  </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>

Answer 2

Props in Vue.js components are read-only by default:
Learn more about one-way data flow

If you need two-way binding for props, you can implement the v-model pattern:
Understand the 3.x syntax changes

<template>
  <div>
    <p>Current coordinates: <strong>{{ coords }}</strong></p>
    <button type="button" @click="updateCoords">Update Coordinates</button>
  </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>

Answer 3

Answer №2

If you need to update the props and make changes in vue 3, your code should be structured as follows:

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

However, the key aspect is to define your prop in a parent component like this:

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

Answer 4

If you need to update the props and make changes in vue 3, your code should be structured as follows:

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

However, the key aspect is to define your prop in a parent component like this:

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

Vue 3: The correct way to properly update component props value with the composition api

Answer №1

Answer №2

Similar questions

The express.js GET method is unable to retrieve the value of req.body

Add a variety of parameters to the URL in order to make an AJAX request

The $.ajax method seems to be experiencing some issues, but fortunately, the $.getJSON

django leaflet - dynamically adjusting controls on HTML page with the click of a button

You cannot pair Reanimated 2 withSequence using a direct value

Is object rest/spread properties not supported by Node.js version 6.3.1?

Upon clicking the button, input numbers into multiple number type inputs

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2

I attempted to upload an image using the Google Drive API, but encountered an error in the response

What is the most effective method for organizing and retrieving information on numerous topics?

Generate a random number to select a song file in Javascript: (Math.floor(Math.random() * songs) + 1) + '.mp3'

How to implement an instance method within a Typescript class for a Node.js application

sending information to PHP through AJAX dynamically

Simple code for form with email confirmation

Creating a Step-by-Step Sequential Slider

What is the process for sending text messages in a local dialect using node.js?

Unable to retrieve scroll position utilizing 'window.scrollY' or 'window.pageYOffset'

Next JS Dynamic Routing displays successful message on invalid routes

Exploring the capabilities of zooming on SVG elements using D3 within an Angular

Use two fingers to scroll up and down on the screen