Как связаться с vuetify v-диалогом, разделенным на дочерний компонент в Vue. js? - PullRequest
Новая
       8

Как связаться с vuetify v-диалогом, разделенным на дочерний компонент в Vue. js?

0 голосов
/ 03 апреля 2020

Я новичок в Vue. js, и я хотел бы показать диалог входа в систему при каждом нажатии кнопки. Я переместил свой диалог в дочерний компонент, чтобы сохранить мой код настолько чистым, насколько это возможно, поэтому у меня есть родительский компонент с вложенным LoginDialog. Фрагменты кода родительского компонента показаны ниже: 

 <div class="my-2 mx-10">
    <v-btn color="#004a04" @click="showLoginDialog">
        <p class="my-2">SIGN IN</p>
    </v-btn>
  </div>
 .... 
  showLoginDialog() {
      this.loginDialogVisibility = true;
  },
  login(username, password) {
      this.loginDialogVisibility = false;
      //login functionality
  }

И дочерний компонент: 

<template>
<div>
    <v-dialog v-model="visibility" max-width="300px">
        <v-card class="d-flex flex-column" height="400px">
    <v-card-title>
      <span class="headline">Sign in</span>
    </v-card-title>

    <v-col class="d-flex justify-center">
      <v-card-text>
        <v-text-field v-model="username" label="Username"></v-text-field>
        <v-text-field v-model="password" :type="'password'" label="Password"></v-text-field>
      </v-card-text>
    </v-col>

    <v-col class="d-flex justify-center">
      <v-card-actions class="card-actions">
        <v-btn text color="primary" @click="login">SIGN IN</v-btn>
      </v-card-actions>
    </v-col>
  </v-card>
</v-dialog>
</div>


export default {
    name: "LoginDialog",
    data() {
        return {
            username: null,
            password: null
        }
    },
    props: {
        dialogVisibility: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        login() {
            this.visibility = false;
            this.$emit("login", this.username, this.password);
        }
    },
    computed: {
        visibility() {
            return this.dialogVisibility;
        }
    }
}
</script>

Проблема заключается в том, что родительская переменная loginDialogVisibility является только изменено на false, если я закрываю диалог, используя кнопку «войти». Если я закрываю его, нажимая на фон, loginDialogVisibility остается верным - и я не могу повторно отрендерить модал, нажав кнопку еще раз. Как правильно настроить такое общение? Что я делаю не так?

1 Ответ

0 голосов
/ 03 апреля 2020

Да, вы должны использовать «emit» в своем дочернем компоненте.
Кстати, вы не пишете положение дочернего компонента внутри родительского компонента. Вы хотите закрыть ваш модальный режим после того, как кнопка входа будет нажата, верно?

Вы можете действовать следующим образом. 

// Parent Component 
<template>
<div class="my-2 mx-10">
    <v-btn color="#004a04" @click="showLoginDialog">
        <p class="my-2">SIGN IN</p>
    </v-btn>
    <child-component @show="showDialog" />
</div>
</template>

<script>
// method emitted by the child to the parent
showDialog(value) { 
      // value == true if Login is clicked
      this.loginDialogVisibility = value; 
  }
</script>


// Child Component
<template>
<v-card-actions class="card-actions">
    <v-btn text color="primary" @click="login">SIGN IN</v-btn>
</v-card-actions>
</template>

<script>
methods: {
    login(){
    ...your logic...
    // emit false value to parent to close the dialog
    this.$emit('show', false) 
    }
}
</script>
...