Как мне переписать данные в переменные, используя толкатель в vue js?

Question

Я хочу спросить, как мне переписать vue js переменные данные, когда я использую толкатель на vue js.

В этом случае толкач, который у меня есть, будет менять данные каждые 5 минут, но здесь я не переписываю предыдущую переменную.

Обычно я использую только:

<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>

Но она не изменилась, пожалуйста, помогите.

Спасибо

Answer 1

Проблема в том, что pusher добавит свой собственный контекст во время bind. Есть способ обойти это, хотя функция

bind позволяет передавать контекст в качестве 3-го параметра. Вы можете передать 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-option-this-context

, если это не так Кроме того, вы можете использовать that var, который должен избежать проблемы контекста.

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
  })
},

---

Возможно, вы захотите попробовать библиотеку vue-pusher, которая может обрабатывать контекст, чтобы быть более vue дружественным.

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

---

Почему that работает?

есть ничего особенного в that нет, но в javascript this есть специальная переменная, которая ссылается на контекст. В некоторых случаях при работе с функциями обратного вызова контекст меняется. присваивая this новой переменной that, сохраняет контекст метода vue в переменной, которую вы затем можете ссылаться на нее, даже если в этом случае функция связывания Pusher связывает другой контекст.