VueJs Ajax Data Mapping

Question

На странице Vue у меня есть вызов для получения данных с использованием Ajax, когда запускается событие mount ().Код воссоздает существующий пейджер, используя новый объект пейджера, где он должен передать все параметры в конструкторе, чтобы восстановить его.

Если я этого не сделаю, vm.Pager - это просто Object, у которого нет некоторых необходимых методов, и он не проходит проверку типа prop, на которую он передается.

        axios.post("/Home/GetList", vm.Pager)
        .then(function (result)
        {
           var p = result.data.Pager;
           vm.Pager = new Pager(p.PageSize, p.CurrentRecord, p.TotalCount);
           // etc. (Pager has additional fields...)
           vm.ItemList = result.data.ListItems;        
        })
        .catch(function (error)
        {
            alert(error); 
        });

В knockoutjs была функция отображения, и вы могли узнать, какие типы отображать без необходимости воссоздания объекта.Это было удобно, особенно для более сложных или вложенных данных Ajax.

Есть ли лучший способ сделать это в Vue (или javascript), где он отображает тип из Ajax, не создавая его заново?

Answer 1

Я обнаружил, что могу использовать либо:

Object.assign(vm.Pager, result.data.Pager);

, либо

// import _ from 'lodash'
_.merge(vm.Pager, result.data.Pager);

... и, похоже, оба корректно обновляют модель представления.К сожалению, когда я использую любой из этих методов, метод watch во вложенном элементе управления ListPager (который получает объект Pager) не срабатывает.

Чтобы заставить это работать, я нашел решение ниже, посмотрев наэта документация VueJs: Реактивность в глубине - Предупреждение об изменении изменений .

 vm.Pager = Object.assign(new Pager(), vm.Pager, result.data.Pager);

Это фактически создает новый пейджер, но, кажется, заполняет его правильно и сохраняет реактивность Vue.Надеемся, что это будет масштабироваться до более сложных решений, если это необходимо.

Answer 2

Вы можете сделать свою собственную функцию отображения.

methods: {
  mapTypesToData (responseData, map) {
     responseData.forEach((item, key) => {
       let mapperVal = map[key]
       if (typeof mapperVal === 'string') {
         this.$set(this, map[key], item)
       } else if (typeof mapperVal === 'function') {
         this.$set(this, key, map[key](item))
       }
     })
  }
}

, тогда в вашем запросе ajax

        axios.post("/Home/GetList", vm.Pager)
        .then(function (result)
        {
          this.mapTypesToData(result.data, {
            ItemList: 'ListItems',
            Pager: (p) => new Pager(p.PageSize, p.CurrentRecord, p.TotalCount)
          })      
        })