2

I want to ask how do I rewrite vue js variable data when I use pusher on vue js.

In this case the pusher I have will change the data every 5 minutes but here I don't rewrite the previous variable.

Usually I only use:

<template>
    <div class="animated fadeIn">
        <b-card>
            <b-card-header>
                Record User
            </b-card-header>
            <b-card-body>
                <div>
                    <h3>Name  : {{ name }}</h3>
                    <h4>Email : {{ email }}</h4>
                </div>
            </b-card-body>
        </b-card>
    </div>
</template>

<script>
import Pusher from 'pusher-js' 

export default {
    name: 'Index',
    data() {
        return {
            name: 'John Doe',
            email: 'jdoe@gmail.com'
        }
    },
    created () {
      this.subscribe()
    },
    methods: {
      subscribe () {
        let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
        pusher.subscribe('users')
        pusher.bind('list', data => {
          console.log(data);
          this.name = data.name
          this.email = data.email
        })
      },
    },
}
</script>

But it hasn't changed, please help.

Thank you

Auxulry
  • 173
  • 4
  • 21

1 Answers1

2

The problem is that pusher will append it's own context during bind. There is a way to get around it though

bind function allows you to pass the context as the 3rd parameter. You can pass this after the handler like this:

subscribe () {
  let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
  pusher.subscribe('users')
  pusher.bind('list', data => {
    console.log(data);
    this.name = data.name
    this.email = data.email
  }, this) // <=== pass this as context
},

ref: https://pusher.com/docs/channels/using_channels/events#binding-with-optional-this-context

if that doesn't work, you can also use the that var, which should escape the context issue.

subscribe () {
  let that = this;
  let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
  pusher.subscribe('users')
  pusher.bind('list', data => {
    console.log(data);
    that.name = data.name
    that.email = data.email
  })
},

You might want to try the vue-pusher library which might handle the context to be more vue-friendly.

https://www.npmjs.com/package/vue-pusher

Why does that work?

there's nothing special about that, but in javascript this is a special variable that references the context. In some cases, when dealing with callback functions, the context changes. assigning this to a new variable that, stores the context of the vue method in a variable that you can then reference it even if, in this case, Pusher bind function binds a different context.

Daniel
  • 34,125
  • 17
  • 102
  • 150
  • still the same is not rewriting when pusher sends data. Here I save it in **created()** – Auxulry Apr 30 '20 at 03:18
  • did you try with `this` at the end? – Daniel Apr 30 '20 at 03:20
  • according to docs, I would expect that to work, I've also updated the answer with a `self` var option – Daniel Apr 30 '20 at 03:41
  • Okay now, work, thank you. can you explain what is the difference? – Auxulry Apr 30 '20 at 03:47
  • added to answer, but I recommend looking into it more, and difference between regular `function(){}` and arrow functions (`()=>{}`) because it might illustrate the context binding – Daniel Apr 30 '20 at 03:54
  • I made one more edit. using `self` has been discouraged, since it's been added to browsers. Use `that` or some thing else like `this1`. Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/self – Daniel Apr 30 '20 at 03:58