Access items in array

[kengres]

vuex-i18n/test/index.html

Line 105 in 8824369

<li v-for="block in $t('listing', {first:'1', second:'2'})">{{ block }}</li>

Thanks for the plugin, really useful. question though. is it possible to access a single item in a list (array) say i wanted the first item of listing.
<p>{{ $t('listing[0]') }}</p>

[tikiatua]

Hi @kengres

Thank you for your input. This is currently not possible. I will look into the issue and see if it can be implemented without adding to much overhead to the processing.

[orsileonel]

Hi! Thanks a lot for this awesome plugin, love it!

I have a similar issue regarding this, I bring the data from a /graphql endpoint, it brings it fine and I added it the following way:

axios({
  url: 'http://localhost:1337/graphql',
  method: 'post',
  data: {
    query: `
      query {
        metatags {
          title
          description
        }
        herounits {
          title
          description
        }
      } `
  }
}).then((result) => {
  Vue.i18n.add('en', result.data.data);
}); 

I can access the data through Vuexi18n doing {{ $t('herounits') }} and it shows it the following way [ { "title": "Hero unit title", "description": "Hero unit description" } ], but I need to access it individually like {{ $t('herounits[0].title') }} which it's not possible for what I see under this issue, my question is if there's any workaround at the moment since I really need to bring the data from the endpoint because I'm using a CMS, or if it's possible for example to bring the data from GraphQL as a pure object without arrays (I'm searching about this under it's respective section but worth asking here in case).

Thanks a lot and keep up the awesome work!

[tikiatua]

Hi @orsileonel

Thank you for your feedback. It is possible to return pure objects from graphql instead of arrays. This depends on the graphql schema definition and implementation.

The plugin will actually transform any language information into a flat lookup map. Unfortunately, the corresponding function does not handle arrays of objects yet.

{
    herounits: {
        title: „some title“
    }
}

// will be flattened to
{
    „herounits.title“: „some title“
}

As a workaround, you could write a function to transform the locale information into a flattened map yourself and pass this flattened information to the plugin. The lookup will then be done with simple string comparison.

[orsileonel]

Thank you @tikiatua, once this feature is applied will replace it for sure, meanwhile will try using that workaround.

EDIT: for anyone who's in need of the same (or similar) as me, you can use the following example which is working great (feel free to update if you come up with a better one)!

axios({
  url: 'yourURL/graphql',
  method: 'post',
  data: {
    query: `
      query {
        yourQueryHere
      } `
  }
}).then((result) => {
  const yourObject = result.data;

  Object.keys(yourObject.data).forEach(key => yourObject.data[key] = yourObject.data[key][0]);

  Vue.i18n.add('en', yourObject);
});

After it all the arrays will be removed allowing you to access the data as {{ $t('metatag.title') }} for example, hope it helps!

Keep up the awesome work!