如何在 Vue 实例中使用 @ViewBag？

Question

I'm a new trainee and I'm studing ASP.NET Core, EF Core and Vue. After to have played a bit with EF Core and Repository Pattern, I'm trying to integrate this with Vue.js for the Front-End, but I have some issues with it.

Susbstantially, I can't to use @ViewBag, where I put a list of something (Users by Model), into instance of Vue.

Controller:

public IActionResult Index()
        {
            IEnumerable<Users> allUsers = _userRepository.GetUsersOrderedByUsername(); //List of Users
            ViewBag.allUsers = allUsers;

            return View();
        }

While in the View I have this

View:

var usersVM = new Vue({
        el: '#users',
        data: {
            allUsers: @ViewBag.allUsers
        }
    })

The problem is that when I try to use it like a list of Users's instances, it rightly doesn't see like a list

I would want show a list of users in this way

View:

<div id="users" class="text-left">
    <ul>
        <li v-for="u in allUsers">
            {{ u.Username }} //Users Model has one Username attribute
        </li>
    </ul>
</div>

How can I resolve this?

Thank you.

Answer 1

I resolved, if it can be helpful I had to code this in the Vue instance that I created:

allUsers: JSON.parse('@Html.Raw(Json.Serialize(ViewBag.allUSers))')