CODEWITHSUNDEEP
vue.jsinputinternationalization
VAhid
VAhid

Reputation: 92

how can use i18n values in placeholders or values of inputs in VueJs2?

Normally, I can replace translated values in codes like this-

<p>{{ $t('greeting') }}</p>

but it's not working in vue2 inputs-

<dropdown 
  :items="filteredCityList" 
  ref="city" 
  itemText="persianName"
  :placeholder="{{$t('SearchCityAndHotel')}}" 
  @onSelect="onSelectCity"
>
</dropdown>

Even I tried this-

<dropdown 
  :items="filteredCityList" 
  ref="city" 
  itemText="persianName"
  :placeholder="$t('SearchCityAndHotel')" 
  @onSelect="onSelectCity"
>
</dropdown>

Upvotes: 1

Views: 2333

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27212

Your second try should work fine, Here is the working demo. Please do have a look and try to find the root cause of the issue you are facing.

const messages = {
  jp: {
    SearchCityAndHotel: 'XXXXX XXXX XXX XXXXX'
  },
  en: {
    SearchCityAndHotel: 'Search City And Hotel'
  }
}

const i18n = new VueI18n({
  locale: "en",
  messages
});

new Vue({
  el: '#app',
  i18n
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n.min.js"></script>

<div id="app">
  <input type="text" :placeholder="$t('SearchCityAndHotel')"/>
</div>

Upvotes: 3

Related Questions