[FIXED] How to declare local property from composition API in Vue 3?

Issue

In Vue 2 I would do this:

<script>
    export default {
      props: ['initialCounter'],
      data() {
        return { counter: this.initialCounter }
      }
    }
</script>

In Vue 3 I tried this:

<script setup>
   import { ref } from 'vue';
   defineProps({ 'initialCounter': Number })
   const counter = ref(props.initialCounter)
</script>

This obviously doesn't work because props is undefined.

How can I bind one-way properties to a local variable in Vue 3?

Solution

It seems the result of defineProps is not assigned as a variable. check Vue3 official doc on defineProps. Not really sure what is the use case of ref() here but toRef API can be used as well.

import { ref } from 'vue';
const props = defineProps({ 'initialCounter': Number })
const counter = ref(props.initialCounter)

Answered By - sungryeol

Answer Checked By - Terry (PHPFixing Volunteer)