Nesting placeholders is not permitted in i18n

I am attempting to implement Interpolation with Vue3 and vue-i18n version 9.3. However, when I try to pass arguments, I encounter the following error:

Message compilation error: Not allowed nest placeholder
1  |  Showing {{from}} to {{to}} of {{total}} entries

This is a snippet from my locale json file:

...
"showing_0_to_0_of_0_entries": "Showing {{from}} to {{to}} of {{total}} entries",
...

Within my component, I have implemented the interpolation as follows:

<div class="info">{{ $t('showing_0_to_0_of_0_entries',{ from: 0, to: 15, total:8 }) }}</div>

Unfortunately, this implementation is not working as expected. The text displayed on my page is:

Showing {{from}} to {{to}} of {{total}} entries

The variables are not being passed correctly. How can I fix this issue?

javascriptvue.jsvue-i18n

Answer №1

As per the guidelines provided in the documentation, it is recommended to use only one set of curly brackets like {}. Here's how I implemented it:

"showing_0_to_0_of_0_entries": "Showing {from} to {to} of {total} entries",

Link to Documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interested in building an album app using Django Tastypie and Backbone?

I'm currently working on developing a new album application using django, with two essential django models: class Album(models.Model): name = models.CharField(max_length=100) family = models.ForeignKey(FamilyProfile) created_by = models.F ...

javascriptdjangobackbone.jstastypie

Hitting a button causes Ajax.load to malfunction

Struggling to make ajax.load method work when clicking a button. The concept is simple: swap out the content of a div with something else using ajax.load. However, despite hours of research, I have yet to find a solution. Pressing the button does nothing. ...

javascriptjqueryajaxweb

How can one interpret the act of "passing" an interface to an RxJS Store using angle brackets?

When working with NgRx and typescript, I often come across this syntax within class constructors: import { Store, select } from '@ngrx/store' class MyClass { constructor(private store: Store<AppState>) { this.count$ = store.pipe(sele ...

javascriptangulartypescriptecmascript-6rxjs

Creating a captivating animation for a social media like button with CSS

I came across some animation code on the web and noticed that when I click the image, it replays the animation from the starting point. I want to make it so that when I click the image, the animation plays and stops, and if clicked again, resets the image. ...

javascriptjquerycsshtml

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

I am looking to dynamically add a div under the div tag with id "includedContent" in the code below. Additionally, I would like to modify the load method to accept an array of ids instead of a hardcoded Id(123) and display the data in the dynamically creat ...

javascriptjqueryhtml

When a page with parameters is reloaded, React fails to initiate

I'm encountering an issue with my application in development mode on localhost. When I try to reload the app on a route with parameters, for example: localhost:8080/item/2 React fails to initialize and only a blank page is displayed. However, if I ...

javascriptreactjsreact-router

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

Is it possible to create a Bootstrap 5 carousel with six items displaying at a time instead of three? I tried changing the value in the JS code, but it didn't work. Can you correct my code so that it displays six items at a time and can be variable la ...

javascripthtmljquerybootstrap-5

The Magnificent jQuery Widget Factory's _trigger Instance

When utilizing the _trigger function to initiate events, I often come across a recurring issue that I struggle to fully comprehend. The problem arises when there are multiple instances of my widget on the same page. In such cases, the most recently instan ...

javascriptjqueryjquery-uijquery-ui-widget-factory

The $scope within the $ionicplatform is not functioning as expected

I've been working on an application, but it doesn't seem to be functioning correctly. Typically, when we add a value to the scope, I expect it to update in the application. Here is the snippet from index.html: <body ng-app="starter"> <i ...

javascriptangularjscordovaionic-frameworkangularjs-scope

Transform input string containing newline characters into separate paragraphs

I utilize Contentful CMS for content management and fetch the content through their API. When the content is fetched, it comes in as a JSON object. One of the keys within this object pertains to the main text block for the entry I am retrieving. This stri ...

javascripthtmljsoncontentful

Ensuring a route is activated in VueJS only once the dispatch and commit actions have been successfully completed

When a user submits a form on my website with their email and password, it triggers an action in the store called userSignIn. In SignIn.vue: onSubmit () { if (this.$refs.form.validate()) { const user = { email: this.email, passwor ...

vue.jsvuejs2es6-promisevue-routervuex

Is there a way to replicate Twitter's "what's happening" box on our website?

Currently, I am trying to extract the cursor position from a content-editable box. However, when a new tag is created, the cursor appears before the tag instead of after it. Additionally, I am having trouble with merging/splitting the tags. Any suggestions ...

javascriptangularjs

Use ajax calls instead of using the bind() function in Drupal for better performance

Currently, I have an AJAX call that is bound to the window popstate event. While it works fine, the issue arises when parsing arguments from the querystring. The problem lies in the fact that the ajax call gets bound to the window on page load, causing the ...

javascriptjqueryajaxdrupal-7

Utilize a drop-down selector in JavaScript to search and refine the results

Looking for a way to enhance your product search form? Consider adding an option to select a specific shop from the dropdown menu. This will allow users to search for products within a particular store if desired. <form action="#" method="get"> &l ...

javascripthtml

Is it advisable to hold off until the document.onload event occurs?

I'm working with a basic HTML file where I need to generate SVGs based on data retrieved through an AJAX call. Do I need to ensure the document is fully loaded by enclosing my code within a document.onload = function() { ... } block, or can I assume ...

javascripthtmlajaxsvgd3.js

Creating an HTML element within a three.js globe

I have a globe created using three.js Reference: I am trying to display an HTML div at a specific latitude/longitude on the globe. Can someone guide me on how to position the div at a particular lat/long? What I've attempted: I'm currently stu ...

javascriptthree.js

Add a new key-value pair to each object in an array, with the value generated by making a request using axios.get

Recently, I've been working on a scraper that has been functioning well until I encountered an issue while trying to scrape data for individual links. Let me clarify the situation: The scraper gathers data about apartments from a webpage where articl ...

javascriptnode.jsaxios

Guide to Appending "Z" to a Date String Using Moment.js in JavaScript and Node.js

I am struggling to format my date to include the "Z" letter at the end. Despite numerous attempts, I have been unsuccessful. The desired format is "YYYY-MM-DDT00:00:00.000Z," but currently it does not include the Z How can I add the Z using moment? It&ap ...

javascriptnode.jsdatetimemomentjs

What could be causing the title property to not appear?

<script setup> import axios from 'axios'; import { ref, onMounted } from 'vue'; const products = ref([]) async function fetchProducts() { try { const response = await axios.get('http://dummyjson.com/products?limit=10 ...

jsonvue.js

Need to know how to show a DIV for a specific time frame using Javascript?

One of the features I am looking to implement in my Django application is a display that notifies the user when one of their posts is about to start. The idea is to show a DIV element with the message: <div>“Will start soon”</div>, 15 minut ...

javascriptpythonjquerydjango