Any way to force re-render?

[CreepGin]

Didn't find anything in the docs or from online sources. Can you force re-render a Vue instance?

Also a related question, is it possible to disable caching on the computed properties. In certain cases, I do want the properties to be calculated every time.

[simplesmiler]

There's no way I'm aware of. Are you experiencing synchronization issues between view and viewmodel?

[yyx990803]

You can turn off caching for computed properties in 0.12.11.

[CreepGin]

@simplesmiler My data is a tree and each node's corresponding element's layout (width, height, among other things) depends on it's parents' and sibling's dimensions. Everything can be synchronized if inside the computed properties, the $el dom is fully computed already. But that's not the case.

I can try to explicitly calculate the dimensions but because my app is responsive layout, this is a lot of work. IMO, the best way would be to somehow have the finished dom $el ready inside of computed properties.

@yyx990803 Thanks! Is this documented anywhere?

[yyx990803]

@CreepGin http://vuejs.org/guide/computed.html#Computed_Poperty_Caching

[CreepGin]

Ah I see. So the doc was just updated. Thanks!

Hi everyone, how does this apply to vue v2 ? I haven't found a way to force a re-render with it.

[LinusBorg]

https://vuejs.org/api/#vm-forceUpdate

@yyx990803 Hi,
can you advice how to rerender components? I found $forceUpdate but right now confusing while use it.
We have html via AJAX call which contain components. I think it rather common practice for old cms. Can you share please your view on this problem?

[LinusBorg]

This repository is deprecated.

Please use our forum for support questions: forum.vuejs.org

We also have a Gitter chatroom.

[luowenxing]

@uharbachou $forceUpdate just take a UI update immediately response to data which only update the dom element needed to be updated according to some algorithm(virtual dom diff in vue2.0 etc) rather than re-render the whole $el . If you want to perform a re-render,there is a way to workaround using v-if

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>

[up9cloud]

I have v-for issue with nested Array data.

• https://vuejs.org/v2/guide/list.html#Caveats => not work.
• https://vuejs.org/api/#vm-forceUpdate => not work.
• v-if + $nextTick => It works! Thanks! @luowenxing

[MaestroJurko]

I have a similar issue, array is larger than what is rendered with v-for. How to fix this, it is quite urgent.

[MaestroJurko]

Ok found a solution, I used push, but I think I found a bug.

Not working with this code:

;[].push.apply(vm.comments, body.data.map((vl) => {
   vl.a = modify(vl.a)
  return vl
}))

[matthiasg]

you can also use :key="someVariableUnderYourControl" and change the key when you want to component to be completely rebuilt