javascript - 相同的事件发射只发生一次而不是 2

Question

我遇到的问题是 this.$emit 只发生了一次，我调用了该事件 2 次，我试图弄清楚但到目前为止还没有运气，有人知道吗？

背后的想法是发出和事件，当收到信息时，再次发出事件以切换组件

表单.vue

    <template>
  <div class="container">
    <div class="row text-center">
      <form>
        <div class="form-group">
          <div class="text-left">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" v-model="username"/>
            <label for="likes">Number of likes</label>
            <input type="text" id="likes" class="form-control" v-model="likes"/>
          </div>
        </div>
        <div class="form-group text-center">
          <div class="row">
            <div class="col-md-2 text-left">
              <label>Bots available</label>
            </div>
            <div class="col-md-10">
              <div class="pull-left">
                <select>
                  <option>Bot 1</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="pull-left">
          <button class="btn btn-primary" @click.prevent="submit" :disabled="username.length == 0 || likes.length == 0 ">Start</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
      data(){
        return{
          username : '',
          likes: ''
        }
      },
      props:['loadingChange'],
      methods:{
        async submit(){
         try {
        this.$emit('loadingChange')

           await axios.get('http://localhost:3000/botwork')
        
        this.$emit('loadingChange')

         } catch (error) {
           console.log(error)
         }
          // console.log(this.username.length,this.likes.length)
        }
      }
};
</script>

<style>
</style>

应用程序.vue

    <template>
  <div id="app">
    <app-header></app-header>
    <app-form v-if="!loading" @loadingChange='loading=!loading'></app-form>
    <!-- <hr /> -->
    <!-- <app-footer ></app-footer> -->
  </div>
</template>

<script>
// import Footer from "./components/Footer.vue";
import Header from "./components/Header.vue";
import Form from "./components/Form.vue";

export default {
  data(){
    return{
      loading: false
    }
  },
  components: {
    // appFooter: Footer,
    appHeader: Header,
    appForm: Form,
  }
 
};
</script>

<style>
</style>

标签： javascripthtmlvue.js