时间戳

首页 > 解决方案 > 如何从 Vuetify 对话框访问数据？

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

问题描述

我正在使用 VueJS Vuetify 框架，我需要从对话框中获取数据？如何从 app.vue 访问对话框 NewUserPopup.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>

如何访问数据？

标签： typescriptvue.jsvuejs2popupvuetify.js

解决方案

你有两个解决方案：

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

推荐阅读