[Vuejs]-How can List<…Model> implement using Vue.js?

by

0👍

Quick example (adapt and improve to your use case):

Controller

public IActionResult Index()
{
    //list of something
    var foo = new List<ErrorViewModel>
    {
       new ErrorViewModel {RequestId = "1", Message = "message 1"},
       new ErrorViewModel {RequestId = "2", Message = "message 2"},
       new ErrorViewModel {RequestId = "3", Message = "message 3"},
     };

    return View(foo);
}

View + Vue.js

data.logs is serialized directly to Razor view (HTML doc) instead of another/additional client-side http request (axios, fetch, etc), which you can do (unnecessary in this sample/simple case).

However, depending on use case, you’ll need to provide an (api) endpoint for Vue to call (axios, fetch, etc) to extend this (updates to data, etc) without reloading (a SPA)

@model List<ErrorViewModel>

@*Load Vue in a predefined (by you) RenderSectionAsync in _Layout template, this goes to head of HTML doc...*@
@section HeadScripts
{
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
}


<div>
    <h2>Server side</h2>
    <ul>
        @foreach (var item in Model)
        {
            <li>@item.RequestId: @item.Message</li>
        }
    </ul>
</div>



<div>
    <h2>Vue (client side)</h2>
    <div id="app">
        <ul>
            <li v-for="log in logs">Request Id: {{log.requestId}} | Message: {{log.message}}</li>
        </ul>

    </div>
</div>


@*Another section you define in _Layout template - this renders at bottom of HTML doc*@
@section Scripts
{
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                logs: @Json.Serialize(Model) //array                
            }

        });
    </script>
}

Hth…

Leave a comment