zhao/imports/ui/components/Lobby.vue

<template>
  <div>
    <h1>LOBBY</h1>

    <form v-on:submit.prevent="newGame">
      <input
        type="text"
        autocomplete="off"
        required
        placeholder="what's your name?"
        v-model="newGameName"
        :disabled="loading"
        />
      <button type="submit">new game</button>
    </form>

    <p>or</p>

    <div>
      <input type="text" autocomplete="off" name="name" placeholder="what's your name?" />
      <input type="text" autocomplete="off" name="code" placeholder="join code" />
      <button id="joingame-btn">join game</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lobby",

  data() {
    return {
      loading: false,
      newGameName: "",
    };
  },

  methods: {
    newGame: function (evt) {
      loading = true;
      let name = this.newGameName;
      Meteor.call("newGame", { name }, (err, res) => {
        console.log(err, res);
      });
    }
  }
}
</script>

<style scoped>
</style>