How to link Vue and application logic?

  • 0
    Greetings. There is a simple question, but it prevents us from moving further in the work on the application. As part of the training, I do a group chat with rooms on webrtc.
    The meaning is this. There are 2 variables in a vacuum.
    // ид пользователя, просто string переменная
    var userId = "";
    // переменная для хранения списка комнат, к которым можно подключиться
    var roomsList = [];


    Further, there is a code for communicating with the server via api with asynchronous and callbacks, for example:
    serverConnect({
      serverUrl: "ws://127.0.0.1:0001",
      success(plugin) {
        plugin.connect({
          success() {
            userId = generateUserIdString();
            plugin.send({"message": "getRoomsList"});
          },
          onmessage(msg) {
            if(msg.type == "gotRoomsList") {
              roomsList = msg.roomsList;
            }
          },
        });
      },
    });


    And there is Vue and html code that is responsible for the interface.

    var app = Vue.createApp({
        data() {
            return {
                userId: "",
                roomsList: [],
            };
        },
    }).mount("#app");


    <div id="app">
        <div>{{ userId }}</div>
        <div>
            <ul>
                <li v-for="room in roomsList">{{ room.name }}</li>
            </ul>
        </div>
    </div>


    And, actually, the question is how to organize these parts so that the userId and roomsList variables can be updated both from the interface and from the code?
    JavaScript Anonymous, May 29, 2019

  • 1 Answers
  • 0
    Vuex
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!