翻译 asp.net 核心 web 应用程序中的 Vue 元素

Question

I recentyl inherented a Web App in work made in ASP.Net Core 2.2 and the Views are made with Razor and Vue, I was asked to add multi languagem support to the app, so already created all the resx files, and added IViewLocalizer to the Views, now I have a problem that is the Vue variables, I never worked with Vue so I would ask your help in this part.

I have a v-for

<div v-for="Order in client.Orders" class="card-block border">
    <div class="card-header">
        <div class="row">
            <div class="col-6">
                <h5 class="text-sm">@Localizer["Order"] {{Order.OrderId}}</h5>
            </div>
            </div>
        </div>
    </div>

    <div class="bg-light text-center">
        <em class="text-sm">{{Order.State}}</em>
    </div>
    <div class="card-body">
        <table class="table table-sm table-borderless text-sm">
            <tbody>
                <tr>
                    <td>@Localizer["Location"]</td>
                    <td class="text-center">{{Order.PaymentLocation}}</td>
                </tr>
                <tr>
                    <td>@Localizer["Destination Country"]</td>
                    <td class="text-center">{{Order.DestCountry}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
 

How can I have access to the {{Order.State}} to translate the value?

Thank you !

Answer 1

I am afraid you can not use asp.net core IViewLocalizer to localize the data in Vue, because the client side codes and server side codes are in different lifetime. You may need to have a Api for translate the words then return it to vue.