Add custom character after i18 translation Vue-CodePudding

So, I'm having an issue adding custom characters after a translated word using i18n. To be more precise, this is the case :

<v-text-field
  v-bind:placeholder="$t('wordCapitalTitle')"
/>

In the above form, the translation works perfectly, I get the 'Title' placeholder value, which is correct.

But what I'm trying to do, is to be able to add extra characters, that doesn't affect the initial translation.

For example, instead of 'Title', I want the placeholder value to be 'Title*', but I cannot find a way to properly add the '*'.

I tried escaping the character using the unicode value, but if I do that, instead of 'Title*', I get 'wordCapitalTitle*'.

Can anyone give me a hint what should I do in order to make this possbile? Thanks alot!

CodePudding user response：

Just use the string template syntax with backticks :

<v-text-field
  v-bind:placeholder="`${$t('wordCapitalTitle')}*`"
/>

CodePudding user response：

You can use template literals to concatenate the *

Demo :

Vue.locale('en', {
  foo: {
    bar: 'English'
  }
})

Vue.locale('el', {
  foo: {
    bar: 'Ελληνικά'
  }
})

new Vue({
  el: '#demo',
  methods: {
    change () {
      let current = this.$lang.lang

      if (current === 'en') {
        this.$lang.lang = 'el'
      } else {
        this.$lang.lang = 'en'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/4.6.0/vue-i18n.min.js"></script>
<div id="demo">
  <input type="text" v-bind:placeholder="`${$t('foo.bar')}*`"/>
  <button @click="change">change</button>
</div>