How To Edit Refs Used As Props In Vue.Js

Question

I have a child component in Vue.js that gets passed a prop from the parent component. While the child component can read the prop, it can not write to the prop without throwing a TypeScript read-only error. How do I let the child component write to the prop?

Here is an example parent component:

<template>
    <ChildComponent :count="parentCount"></ChildComponent>
</template>

<script setup lang="ts">
    const parentCount = ref(0);
</script>

And an example child component:

<template>
    <h1>{{ count }}</h1>
</template>

<script setup lang="ts">
    defineProps({
        count: { type: Number, required: true }
    });
</script>

Maybe would be better to use a store in your case

Fernando Del Cantão
– Fernando Del Cantão

2025-02-12 20:46:34 +00:00
Commented Feb 12 at 20:46 — Fernando Del Cantão
– Fernando Del Cantão, Commented Feb 12 at 20:46
@FernandoDelCantão What do you mean by a store?

Eli Sterken
– Eli Sterken

2025-02-12 20:48:35 +00:00
Commented Feb 12 at 20:48 — Eli Sterken
– Eli Sterken, Commented Feb 12 at 20:48

Manuel Duarte · Accepted Answer · 2025-02-14 00:46:56Z

2

You could use a store to manage the state of your application in a more elegant and easier way, Nuxt 3 has a fairly simple integration with Pinia, here is a link to that. @pinia/nuxt

A store is a global state that can be accessed and updated anywhere without having to pass props from the parent component to the child components, this is specially useful if you have deeply nested child components.

Please take a look at the Pinia documentation for more information but this probably fulfills your use case. Here's a simple example taken from Pinia docs.

// Install @pinia/nuxt and add it as a module in your nuxt.config.js 
export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
})

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

// Your component
<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

counter.count++
// with autocompletion ✨
counter.$patch({ count: counter.count + 1 })
// or using an action instead
counter.increment()
</script>

<template>
  <!-- Access the state directly from the store -->
  <div>Current Count: {{ counter.count }}</div>
</template>

edited Feb 14 at 0:46

answered Feb 12 at 21:29

Manuel Duarte

1,0719 silver badges28 bronze badges

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

1 Comment

Eli Sterken May 7 at 3:05

This solved the issue, thank you!

brc-dd · Accepted Answer · 2025-05-07 03:18:54Z

0

Feels like over-complicating to use a store just for this case. You can simply use v-model to create two-way bindings.

Docs: https://vuejs.org/guide/components/v-model.html

<!-- ParentComponent.vue -->

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const counter = ref(0)
</script>

<template>
  in parent: {{ counter }}
  <br />
  <ChildComponent v-model:counter="counter" />
</template>

<!-- ChildComponent.vue -->

<script setup lang="ts">
const counter = defineModel<number>('counter', { required: true })
</script>

<template>
  in child: {{ counter }}
  <br />
  <button @click="counter++">
    increase counter
  </button>
</template>

Playground

answered May 7 at 3:18

brc-dd

13.5k3 gold badges63 silver badges92 bronze badges

1 Comment

Eli Sterken May 7 at 14:16

I ended up needing the values accessible across the whole app, so a store worked better for me. For this question, however, this would have worked fine. Thanks for taking the time to help!

Collectives™ on Stack Overflow

How To Edit Refs Used As Props In Vue.Js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related