Vue js не обновляет данные на другом клиенте - PullRequest
Новая
       1

Vue js не обновляет данные на другом клиенте

0 голосов
/ 07 февраля 2020

У меня есть одна простая страница с кнопкой ввода и добавления. Ниже у меня есть список всех элементов. 

<template>
  <div class="page-container">
    <form @submit.prevent="insertRoom" class="form-container" autocomplete="off" method="post" accept-charset="utf-8">
      <h3>Add room</h3>
      <label class="form-input-container" for="roomName">
        <input v-model="roomName" type="text" name="roomName" spellcheck="false" placeholder="Room name">
      </label>
      <input class="form-button" type="submit" value="Add">
    </form>
    <list
      :list-title="'Room list'"
      :list-array="rooms"
      :remove-item="deleteRoom"
    />
  </div>
</template>

Как обновить sh список всех элементов на другом клиенте? Например, если я открываю одну и ту же страницу на двух разных P C, и если я добавляю новый предмет (комнату). На втором P C этот список номеров не меняется до тех пор, пока я не обновлю sh страницу. 

<script>
import { mapActions, mapState } from 'vuex'
import List from '~/components/List.vue'

export default {
  components: {
    List
  },

  data () {
    return {
      roomName: null
    }
  },

  computed: {
    ...mapState({
      rooms: state => state.rooms
    })
  },

  methods: {
    insertRoom () {
      this.addRoom({
        roomName: this.roomName
      })
    },

    deleteRoom (room) {
      this.removeRoom({
        roomName: room
      })
    },

    ...mapActions({
      addRoom: 'addRoom',
      removeRoom: 'removeRoom'
    })
  }
}
</script>
...