vue3 computed set doesn't work when get an object binding v-model

Hao Sun 0
Viewed 23
 <script setup>
import { computed } from 'vue'

const user = computed({
  get() {
    // return props.user
    return { 
      name: 'mike',
      age: 18
    }
  },
  set(value) {
    // it doesn't work
    console.log(value)
  }
})

</script>

<template>
  <input v-model="user.name" type="text">
  <input v-model="user.age" type="number">
</template>

the props.user is dynamic value so i used computed getter get the real time result. i think vue computed doesn't deep watching object property change. how to fix it?

vuejs3 javascript
1 Answers

Try something like this

<script setup>
import { reactive, computed } from 'vue'

const user = reactive({ name: 'Mike', age: 18 })
</script>

<template>
  <input v-model="user.name" type="text">
  <input v-model="user.age" type="number">
    {{ user.name}} {{ user.age }}
</template>

Link to the vue playground with that code

In Vue3 you have to use ref and reactive to do this deep dynamic watching, but I am not sure how it will work with props

Konstantin Savusia0
Related