Как избежать бесконечного цикла в vue.js watcher и socket.io

Question

У меня есть слайдер bulma на стороне клиента с vue.js и socket.io.В моем случае у меня было бы несколько экземпляров клиентов - если кто-то переместит свой слайдер socket.io, начните отправлять сообщение на сервер (файл json), сервер сохраняет этот статус и передает этот json другим.Проблема в том, что другие получают сообщения - они тоже начали отправлять этот json, потому что значение данных в их экземплярах тоже меняется.

Спасибо за помощь

<template>
<div>
<input class="slider is-fullwidth is-large is-danger" step="3" min="0" max="255" v-model="value" type="range" v-bind:disabled="disabled">
<p>{{value}}</p>
</div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return {
      value: 0,
      disabled: false
    }
  },

methods: {
 sendChange: function () {
  this.$socket.send({io: "io1", mode: "brightness", user: "tomek", param: this.value})
 },
},

watch: {
 value: function (val) {
  this.sendChange()
 }
},

sockets: {
 dataFromServer: function (data) {
  this.value = data.param
  },
 },
}
</script>

Answer 1

Привязать действие к событию, например, @input или @change со значением v-model, избавиться от наблюдателя и попробовать что-то вроде этого:

<input class="..."
       step="3"
       min="0"
       max="255"
       v-model="value"
       type="range"
       :disabled="disabled"
       @input="sendChange()">

Таким образом, вы отправляете запрос только тогда, когдапользователь намеренно меняет свое значение, а не когда значение обновляется каким-либо образом.