Subscribe on changes!

Use computed attribute to return Map object, the object becomes unresponsive

avatar
Oct 26th 2023

Vue version

"vue": "^3.2.47"

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ustu2zAQ/JUFL5IAV26RmysZfSSHFugDbW5lDqy0VhhTJEFSigtB/94lZTs+JNFF0s7McmaXE/tobTkOyDas8o2TNoDHMNgt17K3xgWYwOFu1ZjeDgFbmGHnTA8ZaTKuuW6M9gFaEQTUcGLlE9dAT4dhA3kB9RaOlfgskl5YUmh8hG/C5sUTTEBJHvIsyB6zVaJci4B5UVK/WyrmxQXdkV2no2qpzavlTS1eONsoLJXp8mwUakCQHpp7oTvMivfHFlzPdMIpHIGtwmtUGLDOi3qb+sXIZepQNgqFixFIWK2XMdIA6SdgbxV5pz+AqpUjjG92xtWcSYJA6tSGM9js8d+x+uftHWfbaUrf7+7muVqTcOnwdwjBaPjQKNnsiX9pjUTJSJxntV6YpKrWZxNsxYKnTDvZlQ/eaFp6isJZXJxU6H7YICkzZ5vT0DgTSpnHr6kW3IDH8ZLmHpv9M/UHf4g1zn469OhGMnbGgnC0wwW++f0dD/R9BnvTDorYr4C/kLY3RI8L7dMQ87sLXnL7JV1dqbtbf3MIqP0pVDQamcsl4Yxu8edXoj/ZvSqvko52zOb/2eQLDA==

Steps to reproduce

click the 'claer Map' button and watch the console

What is expected?

It is hoped that the set method in computed will be triggered when data is modified.

What is actually happening?

When the 'claer Map' button is clicked, the page should clear the data and the console should print out the log information of 'value is change',and the ‘console.log(data.value)’ in the click event prints out an empty Map

System Info

No response

Any additional comments?

No response

avatar
Oct 26th 2023

The returned map is not reactive, making any changes won't force the re-rendering.

const { proxy } = getCurrentInstance();
const handleDelete = () => {
  data.value.clear()
  proxy.$forceUpdate()
}

Or you can set the map as reactive

const map = reactive(new Map())