link1370 link1371 link1372 link1373 link1374 link1375 link1376 link1377 link1378 link1379 link1380 link1381 link1382 link1383 link1384 link1385 link1386 link1387 link1388 link1389 link1390 link1391 link1392 link1393 link1394 link1395 link1396 link1397 link1398 link1399 link1400 link1401 link1402 link1403 link1404 link1405 link1406 link1407 link1408 link1409 link1410 link1411 link1412 link1413 link1414 link1415 link1416 link1417 link1418 link1419 link1420 link1421 link1422 link1423 link1424 link1425 link1426 link1427 link1428 link1429 link1430 link1431 link1432 link1433 link1434 link1435 link1436 link1437 link1438 link1439 link1440 link1441 link1442 link1443 link1444 link1445 link1446 link1447 link1448 link1449 link1450 link1451 link1452 link1453 link1454 link1455 link1456 link1457 link1458 link1459 link1460 link1461 link1462 link1463 link1464 link1465 link1466 link1467 link1468 link1469 link1470 link1471 link1472 link1473 link1474 link1475 link1476 link1477 link1478 link1479 link1480 link1481 link1482 link1483 link1484 link1485 link1486 link1487 link1488 link1489 link1490 link1491 link1492 link1493 link1494 link1495 link1496 link1497 link1498 link1499 link1500 link1501 link1502 link1503 link1504 link1505 link1506

[Vue.js] Can you force Vue.js to reload/re-render?Why?

Just a quick question.

Can you force Vue.js to reload/recalculate everything? If so, how?

Solution :

Try this magic spell:

vm.$forceUpdate();

No need to create any hanging vars :)

Update: I found this solution when I only started working with VueJS. However further exploration proved this approach as a crutch. As far as I recall, in a while I got rid of it simply putting all the properties that failed to refresh automatically (mostly nested ones) into computed properties.

More info here: https://vuejs.org/v2/guide/computed.html

Solution 2:

This seems like a pretty clean solution from matthiasg on this issue:

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

For my use case, I was feeding a Vuex getter into a component as a prop. Somehow Vuex would fetch the data but the reactivity wouldn’t reliably kick in to rerender the component. In my case, setting the component key to some attribute on the prop guaranteed a refresh when the getters (and the attribute) finally resolved.

Solution 3:

Use vm.$set(‘varName’, value). Look for details into Change_Detection_Caveats.

Solution 4:

Why?

…do you need to force an update?

Perhaps you are not exploring vue.js at its best:

To have vue.js automatically react to value changes, the objects must be initially declared in data. Or, if not, they must be added using Vue.set().

See comments in the demo below. Or open the same demo in a JSFiddle here.

new Vue({
el: ‘#app’,
data: {
person: {
name: ‘Edson’
}
},
methods: {
changeName() {
// because name is declared in data, whenever it
// changes, vue.js automatically updates
this.person.name = ‘Arantes’;
},
changeNickname() {
// because nickname is NOT declared in data, when it
// changes, vue.js will NOT automatically update
this.person.nickname = ‘Pele’;
// although if anything else updates, this change will be seen
},
changeNicknameProperly() {
// when some property is NOT INITIALLY declared in data, the correct way
// to add it is using Vue.set or this.$set
Vue.set(this.person, ‘address’, ‘123th avenue.’);

// subsequent changes can be done directly now and it will auto update
this.person.address = ‘345th avenue.’;
}
}
})
/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }
<script src=”https://unpkg.com/vue"></script>

<div id=”app”>
<span>person.name: { person.name }</span><br>
<span>person.nickname: { person.nickname }</span><br>
<span>person.address: { person.address }</span><br>
<br>
<button @click=”changeName”>this.person.name = ‘Arantes’; (will auto update because `name` was in `data`)</button><br>
<button @click=”changeNickname”>this.person.nickname = ‘Pele’; (will NOT auto update because `nickname` was not in `data`)</button><br>
<button @click=”changeNicknameProperly”>Vue.set(this.person, ‘address’, ‘99th st.’); (WILL auto update even though `address` was not in `data`)</button>
<br>
<br>
For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

To master this part of Vue, check the Official Docs on Reactivity - Change Detection Caveats. It is a must read!

Solution 5:

Try to use this.$router.go(0); to manually reload the current page.

Solution 6:

Sure .. you can simply use the key attribute to force re-render (recreation) at any time.

<mycomponent :key=”somevalueunderyourcontrol”></mycomponent>

See https://jsfiddle.net/mgoetzke/epqy1xgf/ for an example

It was also discussed here: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

Solution 7:

using v-if directive

<div v-if=”trulyvalue”>
<component-here />
</div>

So simply by changing the value of trulyvalue from false to true will cause the component between the div to rerender again

Solution 8:

I found a way. It’s a bit hacky but works.

vm.$set(“x”,0);
vm.$delete(“x”);

Where vm is the view-model object, and x is a non-existent variable.

Vue.js will complain about this in the console log but it does trigger a refresh for all data. Tested with version 1.0.26.

Solution 9:

Please read this
http://michaelnthiessen.com/force-re-render/

The horrible way: reloading the entire page
The terrible way: using the v-if hack
The better way: using Vues built-in forceUpdate method
The best way: key-changing on the component

<template>
<component-to-re-render :key=”componentKey” />
</template>

<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>

I also use watch: in some situations.