javascript — динамически конкатенируемый массив в Vue из ajax-запроса не работает

Динамически объединяющийся массив в Vue из ajax-запроса не работает

У меня есть довольно простой экземпляр Vue, который извлекает объекты из конечной точки REST и отображает их на странице. Практически все работает правильно (например, фильтрация), за исключением случаев, когда я добавляю новые объекты в набор результатов, запрашивая новую «страницу» результатов из сервиса. Разница между этой операцией и другими моими операциями заключается в том, что я пытаюсь добавить новые результаты из службы в существующий набор результатов. Поскольку служба возвращает только запрошенную «страницу» результатов, я не могу полностью заменить массив, вместо этого я должен добавить существующий набор результатов в моем экземпляре Vue. Вот код, о котором идет речь:

 var jqXhr = $.ajax({ url: query, context: this }).done(function(data) { this.searchResponse = data; this.resultCount = data.total; if(this.currentPage {amp}gt; 1) { this.searchResults = this.searchResults.concat(data.hits); } else { this.searchResults = data.hits; } }); 

В коде происходит гораздо больше, чем это, но это важная часть, относящаяся к массиву. Он не обновляется за пределами этого блока. И вот соответствующая разметка с v-for, которая перебирает массив:

 {amp}lt;div v-for="(result, index) in searchResults" class="search-page-results-item" v-bind:key="result.id"{amp}gt; {amp}lt;div class="search-page-image-container"{amp}gt; {amp}lt;img v-cloak :alt="result.title" :src="result.properties.thumbnailPath" class="search-page-image"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="search-page-results-content"{amp}gt; {amp}lt;a v-cloak :href="pdpPaths[index]   '.html'" class="title" title=""{amp}gt;{{ result.properties.productTitle }}{amp}lt;/a{amp}gt; {amp}lt;div v-cloak class="description" v-html="summaries[index]"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

И, наконец, это пример данных, которые мы пытаемся перебрать:

 "hits": [ { "id": 1, "title": "product1", "path": "/path/to/product1", "properties": { "thumbnailPath": "/products/images/product1.jpg", "productTitle": "Product 1", "summary": "{amp}lt;p{amp}gt;This is product 1.{amp}lt;/p{amp}gt;rn" } }, { "id": 2, "title": "product2", "path": "/path/to/product2", "properties": { "thumbnailPath": "/products/images/product2.jpg", "productTitle": "Product 2", "summary": "{amp}lt;p{amp}gt;This is product 2.{amp}lt;/p{amp}gt;rn" } } ] 

Я пытался использовать Vue.set, я пытался перебирать объекты ответа и помещать в массив по одному объекту за раз, я пытался использовать оператор распространения и т. Д. В коде массив успешно добавляется в , но Vue не покажет новые результаты. Если я перезаписываю существующий объект в текущем массиве новым объектом, он отображается правильно, поэтому DOM вообще не обновляется, а просто обновляется, чтобы показывать только первое число результатов X, а не больше чем это. Кажется, это должно работать, но это не так.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector