[Vuejs]-Dynamically concatenating array in Vue from ajax request not working

by

1👍

You should not use jQuery mixed with Vue – you’ll end up losing reactivity by manipulating the DOM directly, or experience some other ill effects.

new Vue({
  el: '#app',
  data: {
    searchResults: [],
  },
  methods: {
    async getNewPost(next) {
      this.searchResults.push(await this.getSearchResult(next))
    },
    getSearchResult(next) {
      return fetch(`https://jsonplaceholder.typicode.com/posts/${next}`)
        .then(response => response.json())
        .then(json => {
          return json
        })
    }
  },
  async mounted() {
    this.searchResults = [await this.getSearchResult(this.searchResults.length + 1)]

  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="getNewPost(searchResults.length + 1)">Get new post</button>
  <div v-for="(result, index) in searchResults" class="search-page-results-item" v-bind:key="result.id">
    <div class="search-page-results-content">
      <h3>{{index + 1}}. {{result.title}}</h3>
      <div v-cloak class="description">{{result.body}}</div>
    </div>
  </div>
</div>

The snippet above gets data from a mockup JSON API, and on the push of the button gets the next item.

You can see that in the getNewPost() method I do not push items directly in the searchResults data property, but create a temporary variable and then change the whole array.

👤muka.gergely

Leave a comment