Wrong translations when <translate> is used with v-if

[lastzero]

We're using your plugin in our open-source project, see demo.photoprism.org

I noticed that v-if MAY cause wrong translations with <translate> like in our conditional navigation, so I changed <translate>Private</translate> to <span v-translate>Private</span> (otherwise it was translated as "Photos", not "Private"):

https://github.com/photoprism/photoprism/blob/develop/frontend/src/component/p-navigation.vue#L119

However, that also doesn't do the trick in our account settings dialog, so now I'm testing {{ $gettext('Edit Account') }} instead. Any drawbacks this might have vs <translate>?

See https://github.com/photoprism/photoprism/blob/develop/frontend/src/dialog/account/p-account-edit-dialog.vue

Also: Is there a way <translate> can be fixed/improved?

[BusterNeece]

I'm experiencing this same issue in my Vue application code. For example, on forms that conditionally render different sections (i.e. this one), I have repeatedly noticed that whatever text was translated first will show up even in completely unrelated conditional branches; even though other aspects of the HTML are properly rendered, the translated text is pulled from the same element in the same position in the wrong conditional tree. It's almost as though the translation is being cached by its position in the DOM, and this cache isn't taking into account changes to the DOM by conditional rendering.

I have noticed that switching to v-show instead of v-if helps with this issue, but of course using v-show isn't always appropriate. I haven't tried switching to {{ $gettext('Foo') }} yet, but will attempt that as well.

[lastzero]

We could try v-show as well. I'm curious if it's a bug that maybe can be fixed easily, so that these workarounds are not needed at all. 110% busy with our project, otherwise I would have a look.

If it can't be fixed, then we should know the performance overhead of workarounds to minimize the impact.

[marcel-dancak]

I think I have observed this issue some time ago as well, and setting a different key attribute in conditional <translate> definitions solved it.

[lastzero]

Found the solution in the docs after doing a bit of horizontal scrolling:

autoAddKeyAttributes	{Boolean}	optional	If true, key attributes are auto-generated if not present in your code. See the key documentation and issues #29 and #66. Default value is false. Enable this option only if you know what you're doing.