Question

我对Vue相当新（特别是使用Vue组件），我无法弄清楚我在这里做错了什么。基本上我有一个注册向导（使用vue-good-wizard）如果用户从不点击后退按钮工作正常，但如果在某些时候他们点击回来我得到标题中描述的错误消息。我认为这与第二次渲染的以下模板有关：

＆＃13;

<template>
  <div class="playerSelectionBox">
    <table style="width:100%">
      <tr v-for="i in 10" track-by="$index">
        <td>Row: {{i}}</td>
        <td><player-entry-box></player-entry-box></td>
      </tr>
    </table>
  </div>
</template>

＆＃13;

以下是player-entry-box组件中模板的代码：

＆＃13;

<template>
  <div class="PlayerEntryBox">
    <input class="numberBox" type="text" @blur="sendData" v-model="number" placeholder="#">
    <input class="nameBox" type="text" @blur="sendData" v-model="playerName" placeholder="Player Name"><br>
  </div>
</template>

＆＃13;

我最好的猜测是，当代码被渲染时，v-for中的player-entry-box组件会与其他组件发生冲突，但它在第一次渲染时会按预期工作。这里有什么我做错了吗？

对我所遗漏的内容的任何建议或见解都会很棒，谢谢！

其他信息：

所有组件目前全局注册在main.js文件中。

以下是向导的代码：

＆＃13;

<div id="TeamWizard" v-if="isCreatingTeam" style="padding-top=100px;">
        <vue-good-wizard
          :steps="teamSteps"
          :onNext="nextClickedTeam"
          :onBack="backClickedTeam">

          <div slot="teamPage1">
            <label class="myLabel">Team Name:</label>
            <input type="text" v-model="teamName" placeholder="Team Name"><br>
            <br>
            <label class="myLabel">Sport:</label>
            <br>
            <select-sport :initialSport="tkdSport" style="display: inline-block;" @sportWasSelected="tkdSport=$event"></select-sport>
            <h1></h1>
          </div>

          <div slot="teamPage2">
            <h4>Add Players</h4>
            <h1></h1>
            <player-selection-box></player-selection-box>
          </div>

          <div slot="teamPage3">
            <h4>Step 3</h4>
            <label class="myLabel">Team ID:</label>
            <input type="text" v-model="teamID" placeholder="Team ID"><br>
            <br>
            <label class="myLabel">Team Token:</label>
            <input type="text" v-model="teamToken" placeholder="Team Token"><br>
            <br>
          </div>
        </vue-good-wizard>
      </div>

＆＃13;

这是我打电话的地方。$ nextTick（）：

＆＃13;

mounted () {
      this.$nextTick(() => {
          this.loggedInUser = firebase.auth().currentUser;
      });
    }

＆＃13;

以下内容来自主要部分：

＆＃13;

<template>
  <div class="hello">
    <h1>{{ tkdSport }}</h1>
    <div id="mainPage" v-if="!(isCreatingTeam || isCreatingPlayer)">
      <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>
        <img src="../assets/images/testUser.png" width="100px" height="100px">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
        <div style="scroll">
          <div v-for="i in 50">
            <div style="margin=10px; color=red;"><p>Test {{ i }}</p></div>
          </div>

        </div>
      </div>

      <h1>{{ loggedInUser.email }}</h1>
      <button @click="logout">Logout</button>
      <button @click="openNav">Open Nav</button>
      <br>
      <br>
      <br>
      <br>
      <br>
      <button @click="showTeam">New Team Account</button>
      <br>
      <br>
      <br>
      <button @click="showPlayer">New Player Account</button>
    </div>
    <div v-else>
      <div id="createTeam" v-if="isCreatingTeam">
        <h1>TEAM</h1>
        <br>
      </div>
      <div id="createPlayer" v-if="isCreatingPlayer">
        <h1>PLAYER</h1>

      </div>

      <div id="PlayerWizard" v-if="isCreatingPlayer" style="padding-top=100px;">
        <div>
          <vue-good-wizard
            :steps="playerSteps"
            :onNext="nextClickedPlayer"
            :onBack="backClickedPlayer">

            <div slot="playerPage1">
              <label class="myLabel">Team Name:</label>
              <input type="text" v-model="teamName" placeholder="Team Name"><br>
              <br>
              <label class="myLabel">Sport:</label>
              <br>
              <select-sport :initialSport="tkdSport" style="display: inline-block;" @sportWasSelected="tkdSport=$event"></select-sport>
              <h1></h1>
            </div>

            <div slot="playerPage2">
              <h4>Add Players</h4>
              <h1>Player Selection will go here</h1>
            </div>
          </vue-good-wizard>
        </div>
      </div>

      <div id="TeamWizard" v-if="isCreatingTeam" style="padding-top=100px;">
        <vue-good-wizard
          :steps="teamSteps"
          :onNext="nextClickedTeam"
          :onBack="backClickedTeam">

          <div slot="teamPage1">
            <label class="myLabel">Team Name:</label>
            <input type="text" v-model="teamName" placeholder="Team Name"><br>
            <br>
            <label class="myLabel">Sport:</label>
            <br>
            <select-sport :initialSport="tkdSport" style="display: inline-block;" @sportWasSelected="tkdSport=$event"></select-sport>
            <h1></h1>
          </div>

          <div slot="teamPage2">
            <h4>Add Players</h4>
            <h1></h1>
            <player-selection-box></player-selection-box>
          </div>

          <div slot="teamPage3">
            <h4>Step 3</h4>
            <label class="myLabel">Team ID:</label>
            <input type="text" v-model="teamID" placeholder="Team ID"><br>
            <br>
            <label class="myLabel">Team Token:</label>
            <input type="text" v-model="teamToken" placeholder="Team Token"><br>
            <br>
          </div>
        </vue-good-wizard>
      </div>
    </div>


  </div>
</template>


<script>
  import firebase from 'firebase';

  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        loggedInUser: '',
        teamName: '',
        teamToken: '',
        teamID: '',
        playerName: '',
        tkdSport: 'basketball',
        isCreatingPlayer: false,
        isCreatingTeam: false,
        playerSteps: [
          {
            label: 'Name and Sport',
            slot: 'playerPage1',
          },
          {
            label: 'Link (OPTIONAL)',
            slot: 'playerPage2',
          }
        ],
        teamSteps: [
          {
            label: 'Name and Sport',
            slot: 'teamPage1',
          },
          {
            label: 'Add Players',
            slot: 'teamPage2',
          },
          {
            label: 'Setup Linking (OPTIONAL)',
            slot: 'teamPage3',
          }
        ]
      }
    },
    mounted () {
      this.$nextTick(() => {
          this.loggedInUser = firebase.auth().currentUser;
      });
    },
    methods: {
      logout: function() {
        firebase.auth().signOut().then(() => {
          this.$router.replace('login')
        })
      },
      openNav: function() {
        document.getElementById("mySidenav").style.width = "250px";
      },
      closeNav: function() {
        document.getElementById("mySidenav").style.width = "0";
      },
      showTeam: function() {
        this.isCreatingTeam = true
        this.isCreatingPlayer = false
      },
      hideCreating: function() {
        this.isCreatingTeam = false
        this.isCreatingPlayer = false
      },
      showPlayer: function() {
        this.isCreatingPlayer = true
        this.isCreatingTeam = false
      },
      onComplete: function() {
        alert('Yay. Done!');
      },
      nextClickedPlayer(currentPage) {
        console.log('next clicked', currentPage)
        if(currentPage==1){
          this.hideCreating()
        }
        return true; //return false if you want to prevent moving to next page
      },
      backClickedPlayer(currentPage) {
        console.log('back clicked', currentPage);
        return true; //return false if you want to prevent moving to previous page
      },
      nextClickedTeam(currentPage) {
        console.log('next clicked', currentPage)
        if(currentPage==2){
          this.hideCreating()
        }
        return true; //return false if you want to prevent moving to next page
      },
      backClickedTeam(currentPage) {
        console.log('back clicked', currentPage);
        return true; //return false if you want to prevent moving to previous page
      }
    }
  }
</script>

＆＃13;

用户从单独的登录组件登录，然后被路由到此组件，我只需要访问该组件中的用户对象。

这是堆栈跟踪： Error stack trace

[Vue警告]：nextTick出错：＆＃34; TypeError：无法读取属性＆＃39; key＆＃39;未定义＆＃34;

0 个答案: