search

shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 195 forks source link

Updating toast text replaces icon and actions too #100

Open edtownend opened 5 years ago

edtownend commented 5 years ago

Hi, first, thanks for a great plugin!

I've got a toast containing a countdown that is updated every second using toast.text(newText);. The issue is that this replaces the entire content of the toast, including the icon and any actions on the toast.

As a workaround I've switched to wrapping the content I wish to replace in a and then replace just that via toast.el.getElementsByClassName('classname')[0].innerHTML = 'new content';. But, I don't know if I'm causing any other issues by updating the DOM directly. I suggest that the text method is updated to only alter the text content of the toast.

jamesparkes commented 4 years ago

@edtownend have the exact same issue with our app doing the exact same thing. the toast.text() class blows away my actions, icons, and classes

thermostat42 commented 4 years ago

Same issue, please let me know if you have found the miracle solution since

dchinu97 commented 3 years ago

Hi, Can I pick this up?

tws-pockets commented 2 years ago

For anyone still interested, I found a solution, by ammending the .change code to replace the content of text node of the container, rather than replacing the entire interior via .innerHTML node.childNodes[0].nodeValue = text; rather than 'node.innerHTML = text`