named slot + forceUpdate dont work
zhangenming opened this issue · 2 comments
zhangenming commented
Version
2.7.15
Reproduction link
Steps to reproduce
click button
What is expected?
has reactivity
What is actually happening?
posva commented
The proper way to update the array is with $set()
or splice()
(https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays).
Note you will see the same issue with <template #default>
, this is because with the template you will need to call $forceUpdate()
on the child component Swatch as $forceUpdate() doesn't touch children:
<template>
<div id="app">
<button @click="f">{{ x }}</button>
<!-- default slot OK -->
<Swatches>
{{ x }}
</Swatches>
<!-- named slot BAD -->
<Swatches ref="sw1">
<template #qqqqqq>{{ x }} </template>
</Swatches>
</div>
</template>
<script>
import Swatches from "./components/Swatches";
export default {
components: {
Swatches,
},
data: () => ({
x: [1],
}),
methods: {
async f() {
// this.$set(this.x, 0, this.x[0] + 1)
this.x[0]++
this.$forceUpdate()
this.$refs.sw1.$forceUpdate()
},
},
};
</script>
zhangenming commented
I recommend changing the documentation, with the caveat that forceUpdate only works with unnamed slots