zhao/imports/ui/components/Lobby.vue

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

    <form v-on:submit.prevent="newGame">
      <input type="text" autocomplete="off" v-model="newGameName" required placeholder="what's your name?" />
      <button id="newgame-btn">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 {
      newGameName: "",
    };
  },

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

<style scoped>
</style>