Text not changing in an if statement when using translations.

[andyewen]

I came across this problem in a project I've been working on and I've created an example that demonstrates it.

<template>
    <div id="app">
        <div v-if="flag">
            <p v-translate>Flag is true!</p>
        </div>
        <div v-else>
            <p v-translate>Flag is false!</p>
        </div>
        <button @click="flag = !flag">Click</button>
    </div>
</template>

<script>
    export default {
        name: "app",
        data: () => ({
            flag: false
        })
    };
</script>

<style>
</style>

Clicking the button changes the flag between true and false. The issue is that the text inside the p tag does not change when the button is clicked. Using <translate> instead of the v-translate directive doesn't work. If I remove the v-translate directive the example works as expected.

[kemar]

Yes, actually this is how the plugin works with Vue rendering mechanism. You can read about it here.

It's up to the developper to add a key attribute manually for such cases.

You can also tell the plugin to generate key attributes automatically by enabling the autoAddKeyAttributes config option introduced in v2.1.0, but it can lead to another set of problems.

See issues #29 and #66 for the full history.