Broken icon in main popup message when manga list is empty
<p v-html="i18n('list_no_manga_message')"> will cause the (unknown) HTML element
<v-icon> with inner text
mdi-magnify to be inserted into the actual DOM. See https://vuejs.org/v2/api/#v-html
Several options are possible, none is very satisfactory:
- Remove the icon
- Replace by
<img>with full source path, or custom element with ad-hoc CSS
- Cut the i18n result at some marker, in two or more (if the marker occurs twice and you want to obey that), and insert each chunk with the
v-iconinbetween (e.g. with a
v-for). The main problem is that then each chunk has to be balanced HTML, which might be surprising to translators.
If the icon is kept, the actual markup should NOT be in the i18n message, that is keep a marker (why not use the args facility of getMessage ?) to eventually insert the HTML image. Then the chosen solution can evolve. Maybe with a clever mounted() usage one can actually build a Vue instance for a
v-icon with the
this.el set to the placeholder HTML element that would be created by the string, but that feels extremely complex and tedious.
I tried to create a Vue component that could automate that, but my motivation was not enough to make it through (and it feels klunky anyway). It you think this is the way to go, I'll bite the bullet.