Question

我的父组件具有下一段代码：

<v-dialog max-width="400" v-model="loginDialog" @login-success="loginDialog = false"><login-component></login-component></v-dialog>

我的孩子部分有这个：

methods: {
    async handleLoginForm() {
      try {
        const response = await this.$http.post('/api/users/login', { user: this.user })
        this.$store.dispatch('authenticate', response.data.user)
        this.$emit('login-success')
      } catch(error) {
        this.$swal.mixin({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        }).fire({
          type: 'error',
          title: error.message
        })
      }
    }
  }

我的handleLoginForm()方法中所有工作都可以找到，除了一件事：this.$emit('login-success')什么都不做。我的代码有什么问题吗？

编辑：我刚刚更改了代码，但kamel-case建议不起作用。

Answer 1

正如Phil在评论中提到的那样，您的问题是，您在对话框上而不是在您发出发射的登录组件上添加@ login-success =“ loginDialog = false”。

Answer 2

好吧，我找到了解决此错误的方法。首先，我使用.sync修饰符通过prop实现双向数据绑定：

<v-dialog max-width="400" v-model="loginDialog"><login-component :dialog.sync="loginDialog"></login-component></v-dialog>

我只需要发出新值即可：

this.$emit('update:dialog', false)

子组件未发出方法对象的内部函数

2 个答案: