I have been encountering an interesting issue with my simple breadcrumbs component in the app. Despite having a data property called pickedTable, the component fails to re-render when this data changes. However, by adding the :key="pickedTable" attribute, it triggers the re-rendering process. Why is this behavior occurring?
Has anyone else faced a similar issue?
https://i.sstatic.net/5rFvW.jpg
export default {
template: `
<div class="cr-snackbar">
<div class="cr-snackbar-selection">
Table {{ pickedTable }}
</div>
</div>
`,
data()
{
return {
pickedTable: '2',
}
},
mounted()
{
setInterval(() => {
this.pickedTable = '3'
}, 3000)
}
}
In order to resolve this issue, I found that adding the key attribute was the solution.
<div class="cr-snackbar-selection" :key="pickedTable">
Table {{ pickedTable }}
</div>