[Vuejs]-ASP .net core endpoint configuration

by

0👍

✅

You could just return the ListToCache without extra serialization.

[HttpGet]
public JsonResult GetList(int GetListId)
    {
        SavedList = GetListId;
        List<string> Products = new List<string>();
        List<string> currentList = new List<string>();
        using (var db = new ApplicationDbContext())
        {
            currentList = db.ProductLists.Where(w => w.ListId == GetListId).Select(p => p.Product.Name).ToList();
            foreach (var item in currentList)
            {
                Products.Add(item);
            }
        }
        List<OfflineProduct> ListToCache = new List<OfflineProduct>();

        for (int i = 0; i < currentList.Count; i++)
        {
            var Prod = new OfflineProduct();
            Prod.ID = i;
            Prod.Name = currentList[i];
            Prod.Done = false;
            ListToCache.Add(Prod);
        }

        return Json(ListToCache);
    }

This will generate json response.Besides, the property name is case sensitive for fetch response data.You’d better check the json,generally, it will be

var newObj = { Name: data[i].name, ID: data[i].id, Done: data[i].done }

0👍

Could you try to replace your script tag with this?

<script>
    new Vue({
        el: "#app",
        data: {
            items: []
        },
        created() {
            this.getItems();
        },
        methods: {
            toggle: function (item) {
                item.Done = !item.Done
            },
            getItems() {
                fetch('/GetList/').then(response => response.json())
                .then(data => this.items = data)
                .catch(err => console.log(err));
            }
        }
    });
</script>

Check the Network tab from the Inspector to check that the server is responding what do you want.

Leave a comment