Append/Prepend/Update

[hazzo]

Hi again @hilongjw sorry for opening another issue XD.

I was wondering if there is any method or way to append/prepend data to the recyclerview? Or make the view update with new pushed data to the array that has the data?

Uso of case: chat app. You have your recyclerview and an incoming message pushes to the array that has all the messages (stored in vuex for example) and recyclerview must update it's list with the new coming message.

Is this possible?

Thanks again!

[hazzo]

Hi @hilongjw , I'm trying to use the list prop to get data from the recyclerview.

I manage to get the data but pushing a new element into the array does update the list in my data and in the recyclerview component but does not appear in the DOM. Maybe I need to update the count?

How should this be used to update the list and reproduce a common chat that appends a new message to array?

Thanks for answering to all my queries!!!

[hilongjw]

Try to call RecyclerView's internal methods

RecyclerView.scroller.setItems(newList)
vm.$nextTick(() => {
   RecyclerView.scroller.onResize_()
})

[hazzo]

Doing so seems to be doing something but quite right. I mean the items increment in the array (the strange thing is if the list it's just one item longer It will show that has 2 more) but old messages and tombstone overlap ones I was sawing.

Here is a screencap:

[hilongjw]

@hazzo I tried to rewrite my chat demo, part of the code:

   replyMessage () {
      setTimeout(() => {
        this.addMsg(null, false)
      }, 500 + 1500 * Math.random())
    },
    addMsg (msg, sender, cb) {
      const RecyclerView = this.$refs.RecyclerView
      wechatFetch.getItem()
        .then(data => {
          if (msg) data.message = msg
          data.self = sender
          cb && cb()
          RecyclerView.scroller.MAX_COUNT += 1
          RecyclerView.scroller.addContent([data])
          RecyclerView._scrollToBottom()
        })
    },
    addMessage () {
      this.addMsg(this.input, true, () => {
        this.input = ''
        this.replyMessage()
      })
    },

[hazzo]

Cool!