Add array data to in vue without loosing old data

Question

i am making vue application i want to add more data which is fetching through laravel return in array without loosing old data

my methods is

    getData () {
        axios.get('get/users')
            .then(response => {
                this.queue = response.data.users
            })
        .catch(e => {
          this.errors.push(e)
        })
    }

and my data

    data: function () {
        return {
            queue: []
        }
    },

Full Script is

  data: function () {
        return {
            queue: []
        }
    },

  created () {
    this.getData()
  },
  methods: {


    getData () {
        axios.get('get/users')
            .then(response => {
                this.queue = response.data.users
            })
        .catch(e => {
          this.errors.push(e)
        })
    },

    decide (choice) {
      this.$refs.tinder.decide(choice)
    },

    submit (choice) {
      switch (choice) {
        case 'nope': // 左滑
          break;
        case 'like': // 右滑
          break;
        case 'super': // 上滑
          break;
      }
      if (this.queue.length < 2) {
        this.getData()
      }
    }
  }

here is video link

https://youtu.be/iv82EGMD4XA

i want when queue have 2 data left trigger this.getData() fetch users and add array data to queue without loosing old queue data

Max · Accepted Answer · 2019-01-07 14:50:36Z

1

You can use the concat function

this.queue = this.queue.concat(response.data.users);

In the axios response

Instead of the

this.queue = response.data.users

edited Jan 7, 2019 at 14:50

answered Jan 7, 2019 at 11:33

Max

7,1503 gold badges52 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chirag Ravindra Over a year ago

Would the reactivity kick in in this case? The array ref never changes and elements are added to the array so it may not be detected as a change. I think it would make better sense to use it like this.queue = this.queue.concat(response.data.users); concat is listed as a non-mutating method in the docs

Collectives™ on Stack Overflow

Add array data to in vue without loosing old data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related