Closed
Description
Version
2.6.11
Reproduction link
https://codesandbox.io/s/serene-thunder-0hxw2?file=/src/components/HelloWorld.vue
Steps to reproduce
- Click the buttons to see that the computed fields work.
- Uncomment the watcher.
- Click buttons again and notice that computed fields don't work, and the watcher is never triggered.
What is expected?
Computed fields work and watcher is triggered.
What is actually happening?
Computed fields don't work and watcher is never triggered.
Code
App.vue
<template>
<div id="app">
<button @click="slotOneActive = !slotOneActive">toggle slot</button>
<HelloWorld>
<template v-slot:one>
<span v-if="slotOneActive">I am active</span>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
slotOneActive: true,
};
},
};
</script>
<style>
#app {
text-align: center;
margin-top: 60px;
}
</style>HelloWorld.vue
<template>
<div>
<slot name="one" />
<p><strong>computedSlotValue:</strong> {{ computedSlotValue }}</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
computed: {
computedSlotValue() {
return !!this.$slots.one;
},
},
// watch: {
// computedSlotValue() {
// console.log("watch triggered");
// },
// },
};
</script>Edit: I updated the code example to make it easier.