如何从 Vuetify 对话框访问数据？

Question

我正在使用 VueJS Vuetify 框架，我需要从对话框中获取数据？如何从 app.vue 访问数据 e.g.username 或对话框 NewUserPopup.vue 的密码？

App.vue = 主模板
NewUserPopup.vue = 对话框模板，在 app.vue

对话框NewUserPopup.vue:

<template>
  <v-dialog v-model="dialog" max-width="600px">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" color="primary" class="mb-3">Add new user</v-btn>
    </template>
    <v-card>
      <v-card-title>
        <h3 class="primary--text">Add a New User</h3>
      </v-card-title>
      <v-card-text>
        <v-form class="px-3">
          <v-text-field label="Username" v-model="username" prepend-icon="account_box"></v-text-field>
          <v-text-field label="Firstname" v-model="firstname" prepend-icon="person"></v-text-field>
          <v-text-field label="Lastname" v-model="lastname" prepend-icon="person"></v-text-field>
          <v-text-field :type="'password'" label="Password" v-model="password" prepend-icon="edit"></v-text-field>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn class="primary mx-0 mt-3" @click="submit" >
              Add User
              <v-icon right>done</v-icon>
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
export default {
  data () {
    return{
      dialog: false,
      username: '',
      firstname: '',
      lastname: '',
      password: '',
    }
  },
  methods:{
    submit(){
      this.dialog = false;
    }
  }
}
</script>

主要 App.vue:

<template>
  <v-app >
    <new-user-popup></new-user-popup>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import NewUserPopup from './components/NewUserPopup.vue'


export default {
  name: 'App',
  components:{
    NewUserPopup
  },

  data () {
    return{

    }
  },
};
</script>

如何访问数据？

Answer 1

您有两个解决方案：

您可以使用密码和用户名创建商店，也可以在[=18=中声明用户名和密码]，将它们传递给您的对话框并发出更改。

Answer 2

Child到parent在vuejs中的通信

对话框NewUserPopup.vue:

<template>
  <v-dialog v-model="dialog" max-width="600px">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" color="primary" class="mb-3">Add new user</v-btn>
    </template>
    <v-card>
      <v-card-title>
        <h3 class="primary--text">Add a New User</h3>
      </v-card-title>
      <v-card-text>
        <v-form class="px-3">
          <v-text-field label="Username" v-model="model.username" prepend-icon="account_box"></v-text-field>
          <v-text-field label="Firstname" v-model="model.firstname" prepend-icon="person"></v-text-field>
          <v-text-field label="Lastname" v-model="model.lastname" prepend-icon="person"></v-text-field>
          <v-text-field :type="'password'" label="Password" v-model="model.password" prepend-icon="edit"></v-text-field>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn class="primary mx-0 mt-3" @click="submit" >
              Add User
              <v-icon right>done</v-icon>
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
export default {
  data () {
    return{
      dialog: false,
      model:{}
    }
  },
  methods:{
    submit(){
      this.dialog = false;
      this.$emit('userInfo',this.model)
    }
  }
}
</script>

主要 App.vue:

<template>
  <v-app >
    <new-user-popup @userInfo="getUserData($event)"></new-user-popup>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import NewUserPopup from './components/NewUserPopup.vue'


export default {
  name: 'App',
  components:{
    NewUserPopup
  },

  data () {
    return{

    }
  },
  methods:{
    getUserData(value){
      console.log(value)
    }
  }
};
</script>

如何从 Vuetify 对话框访问数据？

How to acces data from Vuetify dialog?

popup

typescript

vue.js

vuejs2

vuetify.js