Заполнение свойства данных VueJS через строго связанный List <T>DOM в виде бритвы

Question

Я работаю над веб-приложением Asp.Net Core MVC и использую VueJ для рендеринга / манипулирования интерфейсом.В конечном счете, я хочу реализовать Master-Detail в Razor View, используя VueJS, где можно было бы динамически добавлять / удалять подробные строки (позиции), но сейчас я просто пытаюсь получить доступ к объектной модели домена типа List<T> в VueJS Data ипытаясь динамически добавлять / удалять строки данных.

Вот мой код:

ViewModel

public class VueJsTestModelDetail
{
    public int DetailId { get; set; }
    public int Id { get; set; }
    [EmailAddress]
    public string Email { get; set; }
}

Контроллер

public IActionResult Vue()
{
    VueJsTestModel viewModel = new VueJsTestModel();
    viewModel.Id = 1;
    viewModel.Name = "Saud Nasir";
    viewModel.Designation = "Software Engineer";

    for (int i = 0; i < 5; i++)
    {
        viewModel.VueJsTestModelDetails.Add(new VueJsTestModelDetail { Id = 1, DetailId = i + 1, Email = "xyz_" + (i + 1).ToString() + "@abc.com" });
    }
    return View(viewModel.VueJsTestModelDetails);
}

Razor View

@model List<Vue.js_Hello_World.Models.VueJsTestModelDetail> 

<div id="app">
    <div class="container border" style="border: thin;">
        <div class="mt-2">
            <form asp-action="Vue">
                <div class="form-group" style="text-align:right; width:100%">
                    <input type="submit" value="Save" class="btn btn-primary btn-sm" />
                    <input v-on:click="View" type="button" value="View" class="btn btn-success btn-sm" />
                </div>
                <ul>
                    <li v-for="(detail, index) in DetailData">
                        <h4>{{detail.DetailID}}</h4>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>

VueJS Script

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
var vm = new Vue({
    el: "#app",
    data: {
        DetailData: '@Model',
     },
    methods: {
        View: function () {
            alert(this.DetailData);
        }
    }
});
</script>

Я хочу заполнить DetailData значениями, которые я отправляю с контроллера, но через этот код, DetailData заполняется строками, которые содержат имя типа данных.(например, "List<Vue.js_Hello_World.Models.VueJSTestModelDetails>").Я хочу сохранить фактические значения в DetailData при загрузке страницы, например:

DetailData[0].DetailID = 1, 
DetailData[0].Id = 0, 
DetailData[0].Email = "xyz_1@abc.com"

Answer 1

Что происходит, так это то, что вывод @Model эквивалентен вызову ToString () в модели.Вместо этого вам нужно вывести сериализованную версию json объекта.

Заменить строку

DetailData: '@Model',

строкой

DetailData: @Json.Serialize(Model),