Comments (2)
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>
from vue.
I recommend changing the documentation, with the caveat that forceUpdate only works with unnamed slots
from vue.
Related Issues (20)
- Can 2.6.15 be published for this issue with the below fix HOT 2
- Vue 2.7 strictTemplates error HOT 6
- Type augmentation is broken when using typescript's moduleResolution: "Bundler" option
- [Docs] $emit('input', value) cancels event.preventDefault() HOT 1
- <percentage> in css @property is handled incorrectly after run build HOT 2
- `triggerRef` does not trigger `watch` HOT 4
- vue的tags组件router-link标签跳转已打开页面不重新加载数据,有什么好方法吗? HOT 2
- Vue2.7 defineEmits/defineProps compile error HOT 6
- Vue 2.7.16 bug: Some types has not export
- Version 2.7.15 introduced breaking changes about getCurrentScope HOT 2
- $forceUpdate causes getCurrentScope to get an incorrect value HOT 2
- Missing "./types" specifier in "vue" package, how to use withDefaults in Vue2.7.15 with ts setup HOT 1
- When ref and reactive are used together with computed and watch, computed loses its effect. HOT 2
- Using v-show and :style="display: 'block'" simultaneously does not yield the expected results in version 2.7.16. HOT 5
- function setCurrentInstance(vm) crashes when vm._scope is undefined HOT 2
- 如果只是在某个方法调用时写jsx也是需要这样写吗?
- Component caching - wrong type returned in a `set` method HOT 1
- Dynamic component not rendering slot tree HOT 1
- Urgent: Black Duck Vulnerability Fix Needed for 'vue-template-compiler' HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue.