Having a reactive relationship with an initially empty map: const map = reactive({});, I also have a computed property that checks if the map contains a key named "key":
const mapContainsKeyComputed = computed(() => map.hasOwnProperty("key"))After struggling with this issue for a day, I was able to create a simple example to showcase the problem:
<script setup>
import {computed, reactive, ref, watch} from "vue";
const map = reactive({});
const key = "key";
const mapContainsKeyComputed = computed(() => map.hasOwnProperty(key))
const mapContainsKeyWatched = ref(map.hasOwnProperty(key));
watch(map, () => mapContainsKeyWatched.value = map.hasOwnProperty(key))
</script>
<template>
Map: {{map}}
<br/>
Computed: Does the map contain the key? {{mapContainsKeyComputed}}
<br/>
Watch: Does the map contain the key? {{mapContainsKeyWatched}}
<br/>
<button @click="map[key] = 'value'">Add Key-Value</button>
</template>
Despite going through numerous stackoverflow answers and Vue docs, the issue still persists.
- Why doesn't the mapContainsKeyComputed property update?
- If the reactive function doesn't track adding or removing keys in the map, why does
Map: {{map}}(line 14) update seamlessly? - When I switch the map{} with an array[] and use "includes()" instead of "hasOwnProperty", it works perfectly. What's the difference?
- How can I resolve this issue without resorting to the cumbersome "watch" solution where "map.hasOwnProperty(key)" needs to be duplicated?
EDIT: as pointed out by @estus-flask, this issue was a VueJS bug fixed in version 3.2.46. More information can be found here.